[jQuery UI] オートコンプリートを実装する（Autocomplete）

投稿日：2018年5月24日更新日：2018年5月25日

jQueryUIのオートコンプリートを使ったサンプルです。

サンプルソース

例）ボタンを押すと使用中のjQueryUIのバージョンをアラート表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function(){
  //リスト
  var arr = ['SAPPORO', 'TOKYO', 'NAGOYA', 'OSAKA', 'FUKUOKA'];

  //表示設定
  $('#txt1').autocomplete({
    source:arr  //リスト設定
  });
});
</script>
</head>
<body>
  <input type="text" id="txt1">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

//リスト

var arr = ['SAPPORO', 'TOKYO', 'NAGOYA', 'OSAKA', 'FUKUOKA'];

//表示設定

$('#txt1').autocomplete({

source:arr //リスト設定

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

「a」と入力するとオートコンプリートに指定したリストが検索されます。

オプション

Autocompleteのオプションには以下のようなものがあります。

【オプション】
オプション	意味
source	リストの一覧を指定（必須）　例）source:['りんご', ’みかん’, 'ぶどう']
autoFocus	リストの初期表示時に１番目を選択状態とするかどうか　true：する　false：しない（デフォルト）
delay	入力されてからリストが表示されるまでの時間（ミリ秒）　※デフォルトは300。　例）１秒にする⇒ delay:1000
disabled	オートコンプリートを無効にするかどうか　true：無効にする　false：無効にしない（デフォルト）
minLength	検索を開始させる文字数　※デフォルトは1。　例）２文字入力された時点でリスト表示する⇒ minLength:2

【イベントオプション】
イベントオプション	意味
create:function(event, ui){}	オートコンプリートが作成された時
focus:function(event, ui){}	リストがフォーカスされた時
change:function(event, ui){}	選択値が変更された時
close:function(event, ui){}	リストが閉じた時
open:function(event, ui){}	リストが開いた時
search:function(event, ui){}	検索される直前
response:function(event, ui){}	検索された時

解説

オプションは上記以外にもあります。

執筆者：とら