jQuery UI で Autocomplete (入力補完) を実装する方法

テキストボックスに一部の文字を入力すると、入力候補が表示される機能をオートコンプリートといいます。おおまかな仕組みとしては、候補となる単語のリストを用意するだけで入力補完ができるようになります。

jQuery UI のオートコンプリート機能を利用するには、jQuery と jQuery UI のライブラリを読み込む必要があります。

jQuery UI のファイル読込みを CDN のライブラリから参照する方法

jQuery UI を利用するには JavaScript のライブラリを読み込む必要があります。jQuery の処理を用いて実装されているため、具体的には以下の３ファ...

あとは例に習って実装すれば、簡単に実現できます。

jQuery UI で Autocomplete を実装する

サンプルプログラムでは、id:hogehoge を持つテキストボックスに対して入力補完できるように実装します。

<input type="text" id="hogehoge" />

プログラム実装

全体の処理構成は次の通りです。

今回説明する例では、固定文言で配列を定義しています。プログラムの作り方によっては、サーバー側の処理を介してデータベースから候補地のリストを取得して配列を構成することも可能です。

$(function() {
  // 入力補完候補の単語リスト
  var wordlist = [
    "あいうえお",
    "かきくけこ",
    "さしすせそ",
    "たちつてと",
    "なにぬねの",
    "はひふへほ",
    "まみむめも",
    "やゆよ",
    "らりるれろ",
    "わをん",
    "あかさたなはまやらわ",
    "いきしちにひみり",
    "うくすつぬふむゆる",
    "えけせてねへめれ",
    "おこそとのほもよろを",
    "ん",
    "abcdefg",
    "hijklmnop",
    "qrstuv",
    "wxyz",
    "abc",
    "def",
    "ghi",
    "jkl",
    "mno",
    "pqr",
    "stu",
    "vwx",
    "yz",
    "漢字１",
    "漢字２",
    "漢字３"
  ];
  
  // 入力補完を実施する要素に単語リストを設定
  $( "#hogehoge" ).autocomplete({
    source: wordlist
  });
});

jQuery UI Autocomplete のサンプル

入力補完の単語リストに設定できる文字は全角・半角を問いません。つまりアルファベットや数字だけでなく、漢字やひらがなにも対応しています。

とてもシンプルな実装で実現できるが、jQuery UI オートコンプリートの魅力でもあります。