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

更新日: 公開日:2014/01/07
jQuery UI でオートコンプリートを実装

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

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

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

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 オートコンプリートの魅力でもあります。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。