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

2017/02/14 ,

今回はテキストボックスに文字を入力すると、入力候補が表示されるオートコンプリート機能の実装方法について説明をします。jQuery UI の機能により実装を行いますので、前提として jQuery と jQuery UI 関連のファイルを読み込む必要があります。前回のエントリーで、JavaScript ファイル・CSS ファイルの読み込みについて記載しておりますので、そちらを参考にしてみてください。

jQuery UI ファイルの読込みを Google の Libraries サイト (CDN) から参照する方法
※ 2015/9/2 記事内のjQuery UI のバージョンを 1.10.3 から 1.11.4 へ変更しました。jQuery UI を利用するには、jQu...

jQuery UI で Autocomplete を実装する

サンプルプログラムでは具体的に id:hogehoge のテキストボックスに対する実装例で説明します。

実装のイメージとしては、Autocomplete (入力補完) の対象としたい各単語を配列で定義して、対象のテキストボックスに設定するだけです。
以下の例では予め配列を別定義したものを設定するようにしていますが、サーバサイドの処理としてDBから取得して配列で返却したものを設定するような作りにすることも可能です。

jQuery UI Autocompleteのサンプル


↑上記 hogehogeTags に設定した文字を入力してみてください。

設定できる単語は、全角・半角は問いません。もちろん漢字でも絞込みが行われます。実装そのものは非常にシンプルで簡単に組み込むことができます。

以上、jQuery UI の Autocomplete を利用するサンプルでした。

PAGE TOP ↑