jQueryのオートコンプリートプラグインをオレ好みに

テキストボックスに入力された語句を元に関連語句の検索を行い、その結果をリストに表示したかった。それは、純粋なオートコンプリートではない。例えば、「あ」と入力すると結果は{赤,青}、「あい」と入力すると{愛知,アイス,試合}、といった具合にしたい。だから、オートコンプリートに使用するリストが動的に変更できるものを探してたんだけど、ちょうどいいのがあった！

jQuery Autocomplete Mod

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

日本語ドキュメント

http://keicode.com/blog/jquery-autocomplete-mod-japanese/

そして、オレ好みにするためにプラグイン(jquery.autocomplete.js)を少々改変した。

【改変箇所１】リストを選択した後にフォーカスが行方不明になる。テキストボックスにフォーカスを戻したいので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(); }); //選択後にフォーカスを設定

サンプル２

【改変個所２】バグ？matchSubsetオプションにゼロを指定しても１になってしまうので、472行目（サンプル3の2行目）で初期値をゼロに変更。

   1: options.matchCase = options.matchCase || 0;

   2: options.matchSubset = options.matchSubset || 0; //オプションでゼロを設定しても1になっちゃうので初期値ゼロに修正

   3: options.matchContains = options.matchContains || 0;

サンプル３

matchSubsetオプション（小山さんの日本語訳より）

オートコンプリーターがより特定のクエリーに対してキャッシュを使うかどうか。”foot” にたいしてマッチした項目は、”foo” に対してマッチしたもののサブセットです。通常はこれは真であり、このオプションを使うことはサーバーへの負荷を減らしパフォーマンスを向上させます。

このmatchSubsetを偽にすることは今回の要件では最重要。最初はゼロをセットしているにもかかわらずそのように動作しなかったので、だいぶ悩んだ。

リストに表示するデータを返すWebサービスは、ASP.NETのジェネリックハンドラ(ashx)で実装した。改行区切のテキストを戻すだけだからね。

んで、こんなかんじに仕上げた。うむ、満足。

 

ところで、似たようなのにFlexBoxてのもある。高機能そうなので遠慮したけど、どんなもんなんでしょうね。

http://www.fairwaytech.com/Technology/FlexBox.aspx