【オートコンプリート】JQueryUIのautocompleteで入力補完機能を実装

f:id:seintoseiya:20151112194350p:plain
プロジェクトNo.59：オートコンプリート - DEMO

先日、面接に行った企業から出された課題の一つに「オートコンプリート」があったので実装してみました。

jQueryUIのautocompleteが一番簡単そう！

jQueryUIにオートコンプリート機能があるようなのでそれを使用。

HTML

まずはHTMLにInput要素を用意して、ライブラリを読み込み。

<body>
	<div id="container">
		<h1>オートコンプリート</h1>
		<form>
			<input type="text" name="hoge" id="hoge"></input>
		</form>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
	<script type="text/javascript" src="./js/main.js"></script>
</body>

Javascript

autocompleteメソッドをinput要素に適用。
入力候補はsourceオプションに配列で渡せばOK。
適宜、オプションをつける。

$(function(){
	// 入力候補
	var availableTags = [
		'JQuery',
		'CSS',
		'JavaScript',
		'PHP',
		'HTML5',
		'API',
		'Wordpress',
		'enchant.js',
		'cakephp',
		'node.js',
		'IoT',
		'processing',
		'illustrator',
		'unity',
		'MongoDB'
	];
	$('#hoge').autocomplete({
	    source: availableTags, // 入力候補
	    autoFocus: true, // オートフォーカス
	    delay: 500, // オートコンプリートが動作するまでの時間
	    minLength: 2 // オートコンプリートが動作しだす文字数
	});
});