松太郎 さんのプロフィールかめスペースフォトブログリスト |
10月8日 jQueryのオートコンプリートプラグインをオレ好みにテキストボックスに入力された語句を元に関連語句の検索を行い、その結果をリストに表示したかった。それは、純粋なオートコンプリートではない。例えば、「あ」と入力すると結果は{赤,青}、「あい」と入力すると{愛知,アイス,試合}、といった具合にしたい。だから、オートコンプリートに使用するリストが動的に変更できるものを探してたんだけど、ちょうどいいのがあった!
jQuery Autocomplete Mod
日本語ドキュメント そして、オレ好みにするためにプラグイン(jquery.autocomplete.js)を少々改変した。 【改変箇所1】リストを選択した後にフォーカスが行方不明になる。テキストボックスにフォーカスを戻したいので90行目(サンプル1の5行目)のblur()をコメント、313行目(サンプル2の4行目)にFocus()を追加。 1: case 9: // tab 2: case 13: // return 3: if (selectCurrent()) { 4: // make sure to blur off the current field 5: //$input.get(0).blur(); //blurする必要は無いかな... 6: e.preventDefault(); 7: } 8: break; サンプル1 1: $(li).hover( 2: function() { $("li", ul).removeClass("ac_over"); $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); }, 3: function() { $(this).removeClass("ac_over"); } 4: ).click(function(e) { e.preventDefault(); e.stopPropagation(); selectItem(this); $input.get(0).focus(); }); //選択後にフォーカスを設定 サンプル2 【改変個所2】バグ?matchSubsetオプションにゼロを指定しても1になってしまうので、472行目(サンプル3の2行目)で初期値をゼロに変更。 1: options.matchCase = options.matchCase || 0; 2: options.matchSubset = options.matchSubset || 0; //オプションでゼロを設定しても1になっちゃうので初期値ゼロに修正 3: options.matchContains = options.matchContains || 0; サンプル3 matchSubsetオプション(小山さんの日本語訳より) オートコンプリーターがより特定のクエリーに対してキャッシュを使うかどうか。”foot” にたいしてマッチした項目は、”foo” に対してマッチしたもののサブセットです。通常はこれは真であり、このオプションを使うことはサーバーへの負荷を減らしパフォーマンスを向上させます。 このmatchSubsetを偽にすることは今回の要件では最重要。最初はゼロをセットしているにもかかわらずそのように動作しなかったので、だいぶ悩んだ。 リストに表示するデータを返すWebサービスは、ASP.NETのジェネリックハンドラ(ashx)で実装した。改行区切のテキストを戻すだけだからね。 んで、こんなかんじに仕上げた。うむ、満足。
ところで、似たようなのにFlexBoxてのもある。高機能そうなので遠慮したけど、どんなもんなんでしょうね。
トラックバックこの記事のトラックバックの URL は次のとおりです。 http://kame-taro.spaces.live.com/blog/cns!CD806281181610EF!1196.trak この記事を参照しているブログ
|
|