jQueryUI：入力欄にオートコンプリート（入力補助）機能をつける

サンプルはこちら。

See the Pen fkoxL by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

a～bで始まるいくつかの単語を候補に入れています。
jQueryUIでこのようなオートコンプリートが簡単に実装できます。

JavaScript

$(function() {
  //オートコンプリート候補リストの配列を作成
  var data = [
    'abstract',
    'action',
    'agein',
    'base',
    'bbs',
    'beacon',
    'catch',
    'center',
    'celebrity'
   ];

  //オートコンプリートの適用
  $('#text').autocomplete({
    source: data,
    autoFocus: true,
    delay: 0,
    minLength: 1
  });
});

まず3行目より、オートコンプリートの候補に出す単語の一覧を「data」に配列として格納しています。

次に16行目より、「#text」に「autocomplete」コンポーネントを適用しオートコンプリートを実装しています。
いくつかのオプション値も入れています。

「source」はオートコンプリート候補のデータを呼び出し、「autoFocus」は候補が出た時点でそちらへフォーカスする機能を有効にしています。
「delay」はオートコンプリートが実行されるまでの時間で、「minLength」はオートコンプリートが動作する最低文字数です。サンプルではすぐ動くように1文字で設定していますが、候補が多い場合は2文字以上からが好ましいと考えます。