アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

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

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

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

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


テキストフィールドのidを8行目のjQuery("#suggest")の部分と合わせ、リスト作成用のスクリプトをsearch.phpに仕込めば完成です。
search.phpの中身は、表示したいリストを「\n」区切りでechoしているだけです。


アルファベットで何か入力すると、対応したリストが表示されます。
2文字目の入力から実行されます。

上のサンプルは公式サイトのサンプルをそのまま乗せただけで動作しました。
リストが日本語でもちゃんと実行できるようです。
iframeで無理やり表示させてるので、リストが長いと切れちゃいますがキニシナイ!




そして、せっかくなのでこのブログ右上の検索フォームにも勝手に仕込んじゃいました。イヒ。
過去のエントリのタイトルからリストを引っ張ってきてます。
社内から特に文句が出なければこのまま放置で。