jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる

こんにちは。サイフをなくしてヘコんでいる松田です。

今回はトレイン・トレインで使用することになった、入力補完ライブラリ「jquery.suggest」を使ってみたいと思います。
入力補完機能とは、テキストフィールドにある程度文字を入力すると、その文字が含まれた単語のリストを表示してくれるという機能です。サジェスト機能とも呼ばれます。
Googleサジェストを使ってみればどんなものか分かると思います。

「javascript suggest」などで検索してみると、
・suggest.js
・AjaxAutoSuggest
・jquery.suggest
などなど、いくつか候補が出てきます。

この中から選別したわけですが、suggest.jsはサーバーと通信を行わなずに、最初に読み込んだリストから取り出すだけなのでダメ、AjaxAutoSuggestはデザインが凝り過ぎでトレイントレインの雰囲気に合わなかったのでダメ。
というわけで、サーバーにデータを問い合わせることが出来て、なおかつ無難なデザインのjquery.suggestを使ってみることにしました。
Firefox、 Safari、 IE6,7に対応しているようです。

まずはjquery.suggestのサイトからソースコードをダウンロードしましょう。
パッと見どこにあるのか分かりづらいですが、「Here’s the stylesheet and the source ・・・」あたりのリンクがそれです。

jquery.suggest.js　jquery.suggestの本体ァイル
 jquery.suggest.css　jquery.suggestのCSSファイル
 サーバー側PHPのサンプルコード

jQueryプラグインなので、これに加えてjQuery本体をダウンロードします。
jQuery

後は設置して試してみましょう。


<html>
<head>
  <link rel="stylesheet" type="text/css" href="jquery.suggest.css" />
  <script type="text/javascript" src="jquery-latest.js"></script>
  <script type="text/javascript" src="jquery.suggest.js"></script>
  <script type="text/javascript">
  jQuery(function() {
    jQuery("#suggest").suggest("search.php",{});
  });
  </script>
</head>
<body>
  <form>
    <input type="text" name="search" id="suggest" />
  </form> 
</body>
</html>