jQuery UIのautocompleteを使ってみる

jQuery UIのautocompleteを使って、入力補完を実装してみます。

ダウンロード

jQuery UIを使用する場合、ダウンロードして使用する方法とCDNから読み込む方法があります。
ダウンロードの場合、jQuery UI公式サイトにアクセスしてCustom Downloadをクリックします。

ページ下部の「Theme」を選択して、Downloadをクリックします。

Themeに関してはThemesの一覧ページでTheme毎の見た目を確認できます。
画面左のGalleryタブから選択してください。

今回はCDNから読み込む方法で、Themeは「Smoothness」を使用してみます。
　

jQuery UIを利用する準備

読み込むファイルは以下の2点です。

• jquery-ui.css
• jquery-ui.js

ダウンロードして使用する場合、一緒に入っているimagesディレクトリをjquery-ui.cssと同じディレクトリに置いてください。

jQuery本体と合わせて、必要なファイルを読み込みます。

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Themeを変更したい場合は、CSS読み込みURLの「smoothness」を違うThemeに変更して下さい。
　

autocompleteの実装

必須の項目のみ設定して、シンプルなautocompleteを実装してみます。

HTML

<input type="text" id="search" placeholder="半角英字で入力">

JavaScript

$(function() {
	// autocompleteで使用する値候補
	var name = [
		'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
 		'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
		'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
		'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
	];

	$('#search').autocomplete({
		source: name
	});
});

nameで格納している各値が入力値の候補になります。
autocompleteのデモページ

autocompleteのオプション

JavaScript

$(function() {
	// autocompleteで使用する値候補
	var name = [
		'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
 		'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
		'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
		'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
	];

	$('#search').autocomplete({
		source: name,
		appendTo: '#menu',
		autoFocus: true,
		delay: 800,
		minLength: 2,
		position: {
			my: 'left top',
			at: 'right bottom'
		}
	});

	$('#disabled').on('click', function() {
		$('#search').autocomplete('option', 'disabled', true);
	});
});

autocompleteのオプションのデモページ

autocompleteのメソッド

JavaScript

$(function() {
	// autocompleteで使用する値候補
	var name = [
		'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
 		'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
		'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
		'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
	];

	$('#search').autocomplete({
		source: name,
	});

	$(window).on('keydown', function(e) {
		if(e.keyCode === 17) { // スペースキークリックでメニューを閉じる
			$('#search').autocomplete('close');
			return false;
		}
	});

	$('#destroy').on('click', function() {
		$('#search').autocomplete('destroy');
	});

	$('#disable').on('click', function() {
		$('#search').autocomplete('disable');
	});

	$('#enable').on('click', function() {
		$('#search').autocomplete('enable');
	});

	$('#instance').on('click', function() {
		console.log($('#search').autocomplete('instance'));
	});

	$('#delayget').on('click', function() {
		console.log($('#search').autocomplete('option', 'delay'));
	});

	$('#delayset').on('click', function() {
		$('#search').autocomplete('option', 'delay', 1000);
	});

	$('#ooptionsset').on('click', function() {
		$('#search').autocomplete('option', {
			minLength: 2,
			autoFocus: true
		});
	});

	$('#optionget').on('click', function() {
		console.log($('#search').autocomplete('option'));
	});

	$('#sa').on('click', function() {
		$('#search').focus();
		$('#search').autocomplete('search', 'sa');
	});

	$('#widget').on('click', function() {
		console.log($('#search').autocomplete('widget'));
	});
});

autocompleteのメソッドのデモページ

autocompleteのイベント

JavaScript

$(function() {
	// autocompleteで使用する値候補
	var name = [
		'satou', 'suzuki', 'tanaka', 'takahashi', 'itou', 'yamamoto', 'watanabe', 'nakamura', 'kobayashi', 'katou',
 		'yoshida', 'yamada', 'sasaki', 'yamaguchi', 'matsumoto', 'inoue', 'kimura', 'hayashi', 'saitou', 'shimizu',
		'yamazaki', 'abe', 'mori', 'ikeda', 'hashimoto', 'yamashita', 'ishikawa', 'nakajima', 'maeda', 'fujita',
		'gotou', 'ogawa', 'okada', 'murakami', 'hasegawa', 'kondou', 'ishii', 'sakamoto', 'endou', 'fujii'
	];

	$('#search').autocomplete({
		source: name,
		change: function(event, ui) {
			console.log('change');
		},
		close: function(event, ui) {
			console.log('close');
		},
		create: function(event, ui) {
			console.log('create');
		},
		focus: function(event, ui) {
			console.log('focus');
		},
		open: function(event, ui) {
			console.log('open');
		},
		response: function(event, ui) {
			console.log('response');
		},
		search: function(event, ui) {
			console.log('search');
		},
		select: function(event, ui) {
			console.log('select');
		},
	});
});

autocompleteのイベントのデモページ

【参考サイト】

• Autocomplete | jQuery UI
• Autocomplete Widget | jQuery UI API Documentation