入力値にマッチした項目が表示され、入力候補を選択するとテキストフィールドに反映される入力補完（サジェスト）を実装する方法をご紹介します。jsライブラリであるjQuery UIのAutocompleteを利用します。
See the Pen jQuery UI Autocomplete by ayuko (@masyu) on CodePen.
jQuery UI Autocompleteのインストール
CDN
とりあえず動かしたいという場合はCDNでHEADタグに以下のように記述します。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>ダウンロード
jQuery UIはjQuery本体に依存していますので、jQuery自体が導入されていることが前提です。
jQuery UIはこちらからダウンロードできます。
https://jqueryui.com/download/
jQuery UIはさまざまなUIコンポートがあるため、利用するもののみ選択してダウンロードすることができます。Autocompleteのみダウンロードする場合は、「Toggle All」のチェックを外し、「Autocomplete」のみ選択すると、依存関係にあるコンポーネントも自動的に選択されます。
ダウンロードするといろいろなファイルが含まれているのですが、
・jquery-ui.css（または圧縮版のjquery-ui.min.css）
・jquery-ui.js（または圧縮版のjquery-ui.min.js）
このふたつをロードすればOKです。
基本的な利用方法
利用方法はとても簡単で、inputタグに対してautocomplete関数を実行するだけです。ソースは配列か文字列か関数で指定することができますが、ここでは配列を利用しています。
See the Pen jQuery UI Autocomplete by ayuko (@masyu) on CodePen.
jQuery UI Autocompleteの仕様
検索の仕様
デフォルトでは１文字入力しただけでマッチするものがあれば表示されます。検索は部分一致で実行されるようです。英字の大文字と小文字は区別なく検索されます。日本語入力の場合は、変換の確定をしていなくても１文字入力しただけで候補が表示されます。
キー操作
リストメニューに対するキー操作が可能です。↑、↓、enter、escapeなど基本的な操作に対応しています。
カスタマイズ
前方一致検索
デフォルトは部分一致ですが、前方一致検索に変更してみました。sourceに関数を指定することで検索方法をカスタマイズすることができます。
See the Pen jQuery UI Autocomplete 部分一致 by ayuko (@masyu) on CodePen.
CSSでデザインを変える
jQuery UIには複数のテーマが用意されていますので、テーマから選んでも良いと思います。
テーマはこちらのURLのGalleryタブから確認できます。
https://jqueryui.com/themeroller/
こちらは各テーマで表示したAutocompleteコンポーネントです。こんなに種類豊富です。これでも一部です。
独自のデザインにすることももちろん可能です。以下のようにCSSでラブリーな色にしてみました。
.ui-widget-content {
background: #ffe0e0;
color: #a05b54;
}
.ui-widget.ui-widget-content {
border: 1px solid #cca285;
}
.ui-widget-content .ui-state-active {
border: 1px solid #ff0000;
background: #f58b8b;
}
.ui-menu .ui-menu-item {
border-bottom: 2px dotted #cca285;
}
ソースをリモートから取得（ajax）
数千件以上から検索する場合は、キー入力をトリガーにしてリモート（ajax）で検索をした方が良いでしょう。
以下はajaxの実装例です。
$('#keyword').autocomplete({
source: function (request, response) {
$.ajax({
type: 'get',
url: '/suggest_contents/?keyword=' + request.term,
dataType: 'json'
}).done(function (res) {
response(res.list);
}).fail(function (res) {
console.error(res.responseJSON);
response([]);
});
},
delay: 500,
minLength: 2,
});request.termに入力した文字列が入りますので「あ」と入力した場合は/suggest_contents/?keyword=あというURLで検索を実施します。
検索はキー入力するたび実行されます。日本語入力の場合は入力を確定していなくても検索が実行されますので、おそらくkeyDownイベントで検知していると思われます。
無駄に何度もリモートに検索されないように、delayオプションとminLengthオプションを指定することをおすすめします。delayオプションは、入力してから指定ミリ秒待ってから検索を実行します。デフォルトは300ミリ秒です。minLengthは、指定した文字数以上の入力が発生したときに検索を実行します。デフォルトは1です。
検索後は、responseというコールバック関数に入力候補の配列を渡せばOKです。
よみがなで入力して漢字表記をマッチさせる
たとえば都道府県のリストの場合、「と」を入力するだけで東京、栃木、鳥取、徳島、富山が候補に出たら便利ですよね。もちろん漢字にもマッチさせたいので「大」と入力したら大阪、大分を候補に出します。
See the Pen jQuery UI Autocomplete よみがな検索 by ayuko (@masyu) on CodePen.
よみがなを情報として持っておく必要がありますが、実装は簡単です。sourceに指定する関数内で、漢字とよみがなのどちらかにマッチするか判定をかけるだけです。
responseコールバックに指定する配列は、上記実装のようにオブジェクトの配列でも可能ですが、labelというプロパティを必ず含まなければいけません。labelを入力候補に表示するためです。
入力候補をクリックしてリンク先に飛ぶ
今までは入力候補をクリックするとテキストフィールドに反映されるだけでしたが、入力候補をクリックしたらリンク先に飛ぶようにします。Googleの検索窓と同じような操作性です。
See the Pen jQuery UI Autocomplete link by ayuko (@masyu) on CodePen.
リンク先のURLはラベルと対応付けてオブジェクトの配列で保持しています。
selectというオプションに、入力候補をクリックしたときに実行する関数を書くことができます。引数のuiにはクリックした要素が入っています。javaを選択した場合はuiには以下が格納されます。
{ui: {item: {label: "Java", url: "https://ja.wikipedia.org/wiki/Java"}}}
リンク先への遷移はlocation.href = ui.item.url;としているだけです。
