jQuery UI AutoCompleteで入力補完の使い方

まだまだjQueryな筆者です。
入力フォームで、例えば登録している製品を選ぶ時、selectだと縦に長くなりすぎるけど、完全一致で検索も辛い・・・という100件程度の製品から選ぶにはjQuery UI AutoCompleteを使っています。

文字列の部分検索的なことが出来るので結構重宝しています。

Autocomplete | jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building h...

1.大まかな流れ
2. 準備
3. inputを用意し、$(function()で初期化する
4. 参考リンク

1.大まかな流れ

入力補完するおおまかな流れは以下です

ページ読み込み時に製品リストを取得
それをautocompleteにセット
候補選択時の処理を書く

2. 準備

jquery, jquery UIを読み込んでおけばOK。

3. inputを用意し、$(function()で初期化する

初期化はいつでもいいですが、$(function()あたりで初期化しておけばOKかと。
自分の場合はここでDBから引っ張ってきてセットしています。

3.1 inputを用意


<input type="text" name="product" value="">

3.2 autocomplete初期化

javascriptでサクッと書きましょう。
下記でページ読み込み時にajax経由でdbからデータ取得し、autocomplete用に成型(label,valueをセット）。
ターゲットのinputにautocompleteをセットする。
sourceは配列d。
選択時(select)時に何かするならselect:に書けばOK。


$(function(){
//loadする
setTimeout(function(){
load_data();
},100);
};

// dbから製品リストを取得
function load_data()
{
let data = {
//何か渡すのがあれば渡す
};
//$.ajaxをまとめた自作関数
ajax_func('GET',url,data,af_success,af_failed);
}
function af_success(datalist)
{
let d = [];
for( let i=0; i<datalist.length; i++ ){
    let r = {'label': datalist[i]['name'], 'value':datalist[i]['id] };
    d.push(r);
  }
  // ここでautocompleteを初期化
  $('[name="product"]).autocomplete({
    source: d,
    select: function(event, u){
//     名前ラベルは勝手にinputにセットされる
//       let name = u['item']['label'];
       let id = u['item']['value'];
    }
  });
}
function af_failed(e)
{
}