suggest.js

入力補完ライブラリ

Japanese / English

JavaScriptで入力補完を手軽に行うためのライブラリです。
(【お知らせ】ver2.0からprototype.jsを必要としなくなりました)

下記のような機能を持っています。

  • 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく)
  • Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。
  • 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。
  • 検索結果の表示上限を指定できます。(デフォルト上限20件)
  • 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にESCキーでキャンセルといったような操作も可能です。
  • スペース区切りで、複数キーワードの入力補完が行えます。
  • IMEで入力中であっても、検索が行われます。

ソース

suggest.js (ver2.3.1 : 2013/02/11)

GitHub上でコードを管理しています。
onozaty/suggest.js - GitHub


サンプル


使用方法

  1. 補完候補を表示するエリアのスタイルを、あらかじめ定義しておきます。
    #suggest {
        position: absolute;
        background-color: #FFFFFF;
        border: 1px solid #CCCCFF;
        font-size: 90%;
        width: 200px;
    }
    #suggest div {
        display: block;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
    }
    #suggest div.select{ /* キー上下で選択した場合のスタイル */
        color: #FFFFFF;
        background-color: #3366FF;
    }
    #suggest div.over{ /* マウスオーバ時のスタイル */
        background-color: #99CCFF;
    }
    
  2. 入力フォーム(テキストボックス)と補完候補を表示するエリアを定義します。 入力フォームは、autocomplete="off"としてください。(ブラウザの履歴を表示しないようにするため)
    <form onsubmit="return false;">
      <table>
        <tr>
          <td>入力:</td>
          <td>
            <!-- 入力フォーム -->
            <input id="text" type="text" name="pattern" value="" autocomplete="off" size="10" style="display: block">
            <!-- 補完候補を表示するエリア -->
            <div id="suggest" style="display:none;"></div>
          </td>
        </tr>
      </table>
    </form>
    
  3. 本ライブラリ(suggest.js)を読み込みます。
  4. windowのonloadイベントにて、Suggestの生成を行います。
    ※スペース区切りによる複数キーワード入力の場合は、"new Suggest.Local"の部分を"new Suggest.LocalMulti"としてください。
    function startSuggest() {
      new Suggest.Local(
            "text",    // 入力のエレメントID
            "suggest", // 補完候補を表示するエリアのID
            list,      // 補完候補の検索対象となる配列
            {dispMax: 10, interval: 1000}); // オプション
    }
    
    window.addEventListener ?
      window.addEventListener('load', startSuggest, false) :
      window.attachEvent('onload', startSuggest);
    
    Suggest.Localの引数は、下記の通りです。
    • 第1引数:入力が行われるエレメントもしくはそのID
    • 第2引数:補完候補を表示するエリアのエレメントもしくはそのID
    • 第3引数:補完候補の検索対象となる文字列の配列
    • 第4引数:オプション(省略可)
    第4引数のオプションは、下記のように指定出来ます。
    • interval:検索を行う周期(デフォルト500ms)
    • dispMax:補完候補として表示する件数(デフォルトは20件)※0を指定すると上限無しとなります
    • listTagName:リストを生成する際のタグ名(デフォルトは'div')
    • prefix:検索時の前方一致(true)/部分一致(false)の切り替え(デフォルトはfalse:部分一致)
    • ignoreCase:検索時の大文字/小文字の区別有無(デフォルトは区別なし(true))
    • highlight:検索に一致した文字の強調表示(デフォルトは強調表示なし(false))
    • dispAllKey:CTRL+↓(Operaの場合、CTRL+ALT+↓)で、補完候補を全表示(デフォルトは表示なし(false))
    • classMouseOver:補完候補に対してのマウスオーバ時に適用されるスタイルのクラス名(デフォルトは"over")
    • classSelect:補完候補をカーソルで移動した際に選択されている項目に対して適用されるスタイルのクラス名(デフォルトは"select")
    • hookBeforeSearch:検索処理を開始前に実行する関数
    • delim:複数キーワード入力時の区切り文字(デフォルトは半角スペース)※Suggest.LocalMulti使用時有効

仕組み

  • 入力フォームの内容を一定周期(デフォルトは500ms)で確認し、前回と変更があった場合に検索を行います。
  • 検索結果をもとに、補完候補を描画&補完候補毎のイベントを登録します。

注意点

  • 補完候補の表示件数(デフォルト20件)を大きくしすぎると、表示が遅くなります。補完候補の描画が一番コストがかかる処理なので、逆に表示件数を抑えるほど早くなるはずです。
  • 検索対象のデータ件数が、膨大な数(数十万件など)になると、ブラウザがフリーズする可能性があります。検索対象のデータ件数には注意してください。

ライセンス

MITライセンスとします。

商用・非商用に関わらず無償で利用することができます。著作権表記とライセンス表記さえ行えば、再配布、再利用に制約はありません。

原文はこちら:MIT-LICENSE.txt


対応ブラウザ

下記にて動作確認済みです。

  • IE 6 - Windows XP
  • Firefox 2.0.0.5 - Windows XP
  • Opera 9.2 - Windows XP
  • Safari 2.0.4 (419.3) - Mac OS X 10.4.9
  • Firefox 2.0.0.5 - Mac OS X 10.4.9
  • Firefox 2.0.0.1 - Ubuntu 6.10(Edgy)
  • Mozilla 1.7.13 - Ubuntu 6.10(Edgy)

もし、動作しないブラウザがありましたら、ご連絡ください。
出来る限り多くのブラウザに対応したいと思っております。


変更履歴

  • ver 2.3.1 (2013/02/11)
    • Operaで動作しない問題対処。
  • ver 2.3 (2012/07/01)
    • スクロールバー選択時に補完候補が消えてしまう問題対処。
  • ver 2.2 (2010/09/14)
    • スクロール表示での項目位置にあわせた自動スクロール対応。
  • ver 2.1.1 (2009/10/04)
    • 一致した補完候補が1件で、かつ"0"や"00"のように数字の0のみの候補の場合、候補が表示されない問題対処。
  • ver 2.1 (2008/04/02)
    • MITライセンスに変更。
  • ver 2.0.2 (2007/07/29)
    • Mac OS X の Firefox にて、日本語変換ソフト使用時に補完候補が選択できない問題に対処。
      (日本語変換ソフトにて変換時のEnterキーをイベントとして拾ってしまうため)
  • ver 2.0.1 (2007/06/27)
  • ver 2.0 (2007/05/06)
    • prototype.jsへの依存を排除。(prototype.jsが不要になった)
    • クラス名を変更。(IncSearch.Suggest→Suggest.Local、IncSearch.SuggestTag→Suggest.LocalMulti)
    • Operaにて補完候補をESCキー押下でキャンセル時、フォーカスが移動しないよう改善。
    • 補完候補表示におけるスタイルのクラス名をオプションにて変更可能とした。(classMouseOver、classSelect)
    • 検索処理開始前にオプションで指定した任意の関数を実行可能とした。(hookBeforeSearch)
  • ver 1.4 (2006/05/11)
      入力対象のテキストボックスにフォーカスがある状態で、Suggestを生成した場合、入力補完処理が開始されない問題に対処。
  • ver 1.3 (2006/05/06)
      Safari対応。
  • ver 1.2 (2006/04/08)
      補完候補の全表示機能追加。(オプションのdispAllKey)
      補完候補の複数キーワード入力時の区切り文字をオプションで指定可能とした。
  • ver 1.1 (2006/03/01)
      スペース区切りで複数キーワードの入力補完が出来るようにした。
  • ver 1.0 (2006/02/18)
      オプションの見直し。
  • ver 0.2 (2006/02/06)
      バグ対応および機能改善。
  • ver 0.1 (2006/01/22)
      初回公開。

その他

お問い合わせ、コメント等は下記Blogまたは、Contact からお願いします。


きっかけ