JavaScript

【jQuery UI】autocompleteを使って入力フォームをクリックした瞬間に入力候補を出す

テキストボックスに何か入力した際に、関連する項目を絞り込んでボックス下に入力候補として出してくれる自動補完機能便利ですよね～
jQuery UI使って実装するならこんな感じ。

■HTML
?
1
<input type="text" id="autocomplete-text" />

■jQuery
?
1
2
3
4
5
6
7
8
9
$(function() {
 var key = [
  'ズワイガニ', 'タラバガニ', '松葉蟹',
  '越前ガニ', '花咲ガニ', '毛ガニ'
 ]
 $("#autocomplete-text").autocomplete({
  source: key
 });
});
大変シンプルで◎。
テキストボックスにフォーカスしただけで(文字を入力してない状態で)この入力候補をズラっと出す場合はこんな感じ。

■jQuery
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
 var key = [
  'ズワイガニ', 'タラバガニ', '松葉蟹',
  '越前ガニ', '花咲ガニ', '毛ガニ'
 ]
 $("#autocomplete-text").autocomplete({
  minLength: 0, // autocompleteが実行される最小文字数
  source: key
 });
  
 // テキストボックスがクリックされた際にautocomplete実行
 $("#autocomplete-text").focusin(function(){
  // 第1引数：searchを設定した場合、データを絞り込みを実行
  // 第2引数：検索対象のキーワード。空文字を指定した場合、全ての入力候補を表示
  $(this).autocomplete("search","");
 });
});
minLengthオプションはデフォルトが1になってるので忘れずに0へ変更する。
focusイベントやclickイベントではautocompleteが実行されないので、イベントのバブリングができるfocusinイベントを使用する。