サイト制作に関するメモ書き

HOME > JavaScript > jQuery > jQuery UIのautocompleteを使ってみる

jQuery UIのautocompleteを使ってみる

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

ダウンロード

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

try-to-use-the-autocomplete-of-jquery-ui01

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

try-to-use-the-autocomplete-of-jquery-ui02

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

try-to-use-the-autocomplete-of-jquery-ui03

今回は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のデモページ

source 入力補完に使用するデータを定義する。必須。

 

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のオプションのデモページ

appendTo メニューの追加する位置を指定。
初期値はnull。
autoFocus メニュー表示時に1番目の項目がフォーカスされた状態にする。
初期値はfalse。
delay キー入力後、検索が実行されるまでの待ち時間を指定。
初期値は300。
disabled autocompleteを無効にする。
初期値はfalse。
minLength 検索を開始する最小文字数を指定する。
初期値は1。
position 表示位置を指定する。
myはメニューの位置、atは対象要素(input)の位置を指定。
値の詳細はこちらを参照。
初期値は{ my: “left top”, at: “left bottom”, collision: “none” }。

 

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のメソッドのデモページ

close() メニューを閉じる。
destroy() autocomplete機能を削除する。
disable() autocompleteを無効化する。
enable() autocompleteを有効にする。
instance() autocompleteのインスタンスオブジェクトを取得する。
option(optionName) optionNameの値を取得する。
option() optionのキーと値をセットにして取得する。
option(optionName, value) 指定したoptionNameにvalueを設定する。
option(options) 指定した複数のoptionに値を設定する。
search([value]) 検索イベントがキャンセルされていない状態(inputにフォーカスがある状態)の時、valueでの入力補完をメニューに表示する。
widget() メニュー要素を含むjQueryオブジェクトを返す。

 

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のイベントのデモページ

change(event, ui) inputからフォーカスが外れたときに、値が変更されていたら処理を行う。
close(event, ui) メニューが非表示になったときに処理を行う。
create(event, ui) autocompletecreateが作成されたときに処理を行う。
focus(event, ui) メニューにフォーカスが当たった時に処理を行う。
open(event, ui) メニューを開くか更新されたときに処理を行う。
response(event, ui) 検索完了後、メニューが表示される前に処理を行う。
search(event, ui) 検索を行う前に処理を行う。

 

【参考サイト】

 

“jQuery UIのautocompleteを使ってみる” への1件のコメント

  1. […] こんなサイトもあった。(かなり分かりやすい) リンク → jQuery UIのautocompleteを使ってみる […]

オートコンプリートでフォーカスが入ったらすぐに候補を出したいんだ。 | 師匠と呼ばれてはいるけど にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP