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

2014/01/07

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

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

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

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

jQuery UI で Autocomplete を実装する

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

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

プログラム実装

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

  1. 入力補完の対象とする単語を配列で定義
  2. オートコンプリートを実装する要素に上記の配列を指定

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

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

jQuery UI Autocomplete のサンプル

wordlist の文字を入力

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

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

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索