jQueryのsuggestとautocompleteを使ってみる

googleなどの検索ボックスで予測したり、ぺろっと出てくるあれ、実装してみました

予測で出てくるあれ

http://polarblau.github.com/suggest/

こちらからjquery.suggest.jsをゲット

ぺろっとでてくるあれ

http://api.jqueryui.com

こちらからjquery-1.9.0.jsとjquery-ui.jsをダウンロード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8">
	<link rel="stylesheet" href="./jquery-ui.css" />
		<style>
		input#tags {
			padding: 5px;
			font-size: 1.2em;
			letter-spacing: 0;
			font-weight: normal;
			font-family: Helvetica, Arial, sans-serif !important;
			position: relative;
			color: #333;
			width: 200px;
			background: #fff;
			z-index: 10;
		}
	</style>
	
	<script src="./jquery-1.9.0.js"></script>
	<script src="./jquery-ui.js"></script>
	<script src="./jquery.suggest.js"></script>
	<script>
	var availableTags = [
											 "ActionScript",
											 "AppleScript",
											 "Asp",
											 "BASIC",
											 "C",
											 "C++",
											 "Clojure",
											 "COBOL",
											 "ColdFusion",
											 "Erlang",
											 "Fortran",
											 "Groovy",
											 "Haskell",
											 "Java",
											 "JavaScript",
											 "Lisp",
											 "Perl",
											 "PHP",
											 "Python",
											 "Ruby",
											 "Scala",
											 "Scheme"
										 ];
	$(function() {
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});
	
	
	$(function(){
			$('#tags').suggest(availableTags);
		});
	</script>
</head>
<body>
<div class="ui-widget">
	<label for="tags">tag: </label>
	<input name="tags" id="tags" />
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

input#tags {

padding: 5px;

font-size: 1.2em;

letter-spacing: 0;

font-weight: normal;

font-family: Helvetica, Arial, sans-serif !important;

position: relative;

color: #333;

width: 200px;

background: #fff;

z-index: 10;

}

</style>

var availableTags = [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

];

$(function() {

$( "#tags" ).autocomplete({

source: availableTags

});

$(function(){

$('#tags').suggest(availableTags);

});

</script>

</head>

<body>

</div>

</body>

</html>

jQuery