【jQuery UI】サジェスト機能を実装してみる

「jQuery UI」というjQueryをベースとしたJavaScriptライブラリを使ってサジェスト機能を実装してみたので、その備忘録です！

1 環境・バージョン
2 コード
3 終わりに

環境・バージョン

jQuery UI 1.13
jQuery 3.6.0

コード

jQuery UIの「Autocomplete」というものを使うと簡単に実装ができます。

下記のCodePenで挙動をご確認ください（jsのdataという変数にあらかじめ入れているデータ（sample, test）を入力するとサジェストされます）

See the Pen Suggest by モリヤス (@moriyas) on CodePen.

少し詳細にコードを見ていきます。

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Suggest test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/style.css">

</head>
<body>
  <div class="input-wrap">
    <input type="text" id="suggest">
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script src="/suggest.js"></script>
</body>
</html>

「id=suggest」としたinput要素にサジェスト機能を実装していきます。

また、7行目のjQuery UIのCSSと16行目のjQuery、17行目のjQuery UIのJavaScript（jQuery？）を読み込ませておきます。（CodePenではHTMLに書いていませんが、内部で読み込まれるようにCodePenの設定でしております）

CSS

style.css

.input-wrap {
  padding: 50px;
}

こちらはテキストボックスを見やすいようにあてているスタイルなので、今回の機能実装とは関係ありません。なので、設定しなくてもOKです！

JavaScript（jQuery）

suggest.js

$(function(){
  const data = [
       'sample1',
       'sample2',
       'sample3',
       'sample4',
       'test',
   ];

   $('#suggest').autocomplete({
       source: data,
       autoFocus: true,
       delay: 500,
       minLength: 2
   });
});

先述したとおり、2行目の「data」変数にサジェストしたい文字を文字列の配列に格納しておきます。

10から15行目がjQuery UIのAutocompleteの設定になります。

まずサジェストしたい要素を10行目の「$(‘#suggest’)」で取得しています。

Autocompleteのオプションとして今回設定したのは下記4つ

source	サジェストさせたいデータを文字列や配列、関数で定義するオプション。設定が必須です。
autoFocus	サジェストのメニューが表示されたときに最初の項目が自動的にフォーカスされるかどうかを決めるオプション。デフォルトはfalse
delay	キーストロークが起きてから検索が実行されるまでの遅延をミリ秒単位で設定するオプション。デフォルトは300ミリ秒 ※すぐさま取得できた方が良いため設定なしの方が良いと思いきや、リモートのデータからサジェストするデータを取得する場合は、「応答性が低くなり、大量の負荷が発生する可能性があります。」と書いてあったので設定した方が良いっぽい。
minLength	検索を実行する前にユーザーが入力する必要がある最小文字数を設定するオプション。 ※項目が数個しかないデータでは0が便利ですが、1文字の検索で数千項目に一致する可能性がある場合は、より高い値を使用するべき。

他にもオプションや、メソッドなど設定できる項目がたくさんあるので、公式サイトをご覧ください。

なので、今回の設定を確認すると、

サジェストされるのは「data」変数に格納されている文字列
サジェストメニューが表示されると、一番上に表示されている項目が自動的にフォーカスされる→例えば「sa」をテキストボックスに打つと、「sample1」が自動的にフォーカスされます。
キーストロークが発生から500ミリ秒(0.5秒）遅れて検索が実行される
検索が実行されるのは2文字以上入力があったとき→例えば「s」をテキストボックスに打ってもサジェストメニューは表示されません。