YappoLogs

suggest_ajax.js - suggest.jsをAjaxなどに対応する等の拡張スクリプト公開

先月suggest.jsというGoogle Suggestっぽい物を簡単に作れるスクリプトが公開されました。
ちょろちょろっと自分の使いやすいようにカスタマイズしていたのですが、それを公開してみます。

最初はAjax化でもしようと思ってたですが、Ajax処理内蔵するのもいけてないので付けるのやめました。
ソースの中身は、全部なごりなのです。。。

suggest.jsの思想の真逆を行っているなんて事は気のせいです。

ソース

suggest_ajax.js

サンプル

ajaxで補完リストを読み込む

主な変更点

補完リスト上でEnterキーを押して、選択肢の確定を行うことができる

補完リストの作成直前と、選択肢の確定後のそれぞれにフックを行うことができるregister_hook()メソッド追加

補完データを更新するreload()メソッド追加

確定した入力内容を取り出すgetText()メソッド追加

入力エリアの監視を停止するexit()メソッド追加

使い方

基本はsuggest.jsと同じです。

<script src="suggest.js"></script>

<script src="suggest_ajax.js"></script>

ってな感じでロードしてください。
呼び出し方は

            var suggest = new IncSearch.Suggest_Ajax(

                  "text",    // 入力のエレメントID

                  "suggest", // 補完候補を表示するエリアのID

                  list,      // 補完候補の検索対象となる配列

                  {dispMax: 10, interval: 1000}); // オプション

と、同じ呼び出し方ができます。
listはnew Array()と空の配列を入れることもできますし、オプションが無ければ

var suggest = new IncSearch.Suggest_Ajax('text', 'suggest');

と引数を省略できます。

hookはserachとblurに処理を挟む事ができます。
searchでデータをAjaxかなにかで取ってきて補完リストを更新する処理を行います。

  suggestajax.register_hook('search', function (suggest) {

    var ajax = new Ajax.Request('./suggest_ajax.txt', {method: 'get', onComplete: function (res) {

      var list = eval(res.responseText);

      suggest.reload(list);

      suggest.search();

    }});

  });

こんな感じで処理を入れます。
reload()で一覧更新を行った後に必ずsearch()を呼び出してください。
この呼び出しを行わないとsuggestが機能しません。
この例ではsearch()をAjax.RequestのonCompleteの最後に入れることがコツです。

blurについてはサンプルのソースを確認してください。
exitは動作をとめるだけなので、特に説明しません。

そのほか

ライセンスはsuggest.jsと同じく「クリエイティブ・コモンズ 帰属 2.1 日本」で
十数行くらいsuggest.jsからコードをコピーしています。

Posted by Yappo at 2006年02月03日 16:12 | TrackBack | tech