chokuryu/autocomplete.txt

## autocomplete.txt
<!doctype html>
<html lang="jp">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>実験アプリケーション</title>
		<!-- <link rel="stylesheet" href="main.css"> -->
		<link href="./jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
		 <style>
			/* autocomplete */
			.ui-autocomplete {
				max-height: 200px;
				overflow-y: auto;
				/* prevent horizontal scrollbar */
				overflow-x: hidden;
			}
			/* IE 6 doesn't support max-height
			* we use height instead, but this forces the menu to always be this tall
			*/
			* html .ui-autocomplete {
				height: 200px;
			}
		</style>
		<script src="./js/lib/jquery-1.10.2.js"></script>
		<script src="./jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
	</head>

	<body>
		<div>AutocompleteTest</div>
		<input type="text" id="autocomplete" />

		<script src="./js/main.js"></script>
	</body>
</html>


$(function(){
	var availableTags = [
		"ActionScript",
		"AppleScript",
		"Asp",
		"BASIC",
		"C",
		"C++",
		"Clojure",
		"COBOL",
		"ColdFusion",
		"Erlang",
		"Fortran",
		"Groovy",
		"Haskell",
		"Java",
		"JavaScript",
		"Lisp",
		"Perl",
		"PHP",
		"Python",
		"Ruby",
		"Scala",
		"Scheme"
	];
	// jquery-uiのautocompleteウィジェットについて
	// ・文字列の変更が連続する場合sourceメソッドの連続呼び出し防止がかかっている。ラグは300~500ms程度
	// ・検索結果0件の場合はsourceメソッドは実行されていない。
	var getListByUserInput = function( data, callback ) {

		// input要素の入力値を取得
		var str = data.term;
		//console.log( 'in: ' + str );

		// 候補データの取得結果を配列として第２引数のコールバック関数にわたすとオートコンプリートに反映される。
		setTimeout( function() {
			callback(availableTags/*[
			str + "あ",
			str + "い",
			str + "う",
			str + "え",
			str + "お",
			str + "か",
			str + "き",
			str + "く"
			]*/);
		}, 200 );
	};
	$( "#autocomplete" ).autocomplete({
		source: getListByUserInput,
		delay: 200
	});
	// リストブロックの最大高さなどはCSSにて指定(.ui-autocomplete)
});
	<!doctype html>
	<html lang="jp">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>実験アプリケーション</title>
	<!-- <link rel="stylesheet" href="main.css"> -->
	<link href="./jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<style>
	/* autocomplete */
	.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	}
	/* IE 6 doesn't support max-height
	* we use height instead, but this forces the menu to always be this tall
	*/
	* html .ui-autocomplete {
	height: 200px;
	}
	</style>
	<script src="./js/lib/jquery-1.10.2.js"></script>
	<script src="./jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
	</head>

	<body>
	<div>AutocompleteTest</div>
	<input type="text" id="autocomplete" />

	<script src="./js/main.js"></script>
	</body>
	</html>




	$(function(){
	var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
	];
	// jquery-uiのautocompleteウィジェットについて
	// ・文字列の変更が連続する場合sourceメソッドの連続呼び出し防止がかかっている。ラグは300~500ms程度
	// ・検索結果0件の場合はsourceメソッドは実行されていない。
	var getListByUserInput = function( data, callback ) {

	// input要素の入力値を取得
	var str = data.term;
	//console.log( 'in: ' + str );

	// 候補データの取得結果を配列として第２引数のコールバック関数にわたすとオートコンプリートに反映される。
	setTimeout( function() {
	callback(availableTags/*[
	str + "あ",
	str + "い",
	str + "う",
	str + "え",
	str + "お",
	str + "か",
	str + "き",
	str + "く"
	]*/);
	}, 200 );
	};
	$( "#autocomplete" ).autocomplete({
	source: getListByUserInput,
	delay: 200
	});
	// リストブロックの最大高さなどはCSSにて指定(.ui-autocomplete)
	});