「jQueryUI」オートコンプリート(autocomplete)のサンプル

2022年4月18日

環境
jquery.min.js 3.6.0
jquery-ui.min.js 1.13.1
jquery-ui.css　1.13.1

書式
テキストボックスに文字を入れると入力文字の候補が表示されます。
const 候補配列名 = [要素1,要素2,xxx];

$("#セレクタID").autocomplete({
  source:候補配列
});

jQuery UIのAutocomplete Widgetのリンク
https://api.jqueryui.com/autocomplete/

使用例

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/themes/smoothness/jquery-ui.css">

<label for="label1">名前: </label>
<input type="text" id="city" maxlength="5"><br>
<label for="label1">都市: </label>
<input type="text" id="name" maxlength="5">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/jquery-ui.min.js"></script>
<script>
$(function() {
      const cityArr = ["tokyo1","tee02","tanaka","tood02"];
    const cityArr2 = ["東京01","東京02","東京03","東京04"];
    
      // オートコンプリート
      $("#city").autocomplete({
            source:cityArr
      });
    
    // オートコンプリート
      $("#name").autocomplete({
            source:cityArr2
      });
});
</script>

実行結果

テキストボックスの「名前」欄にtと入力すると入力文字の候補が表示されます。
テキストボックスの「都市」欄に「東」と入力すると入力文字の候補が表示されます。