皆さま,2015年もよろしくお願いいたします。新年一発目はインクリメンタルサーチに関わるこの一本(とか書きながら,このエントリは新年に見られるとは限らんのですな…)
suggest.jsとは
検索をするときに,Google Suggestっぽく入力補完をしてくれるライブラリです。
事前にリストを必要とするので,リストの数が多すぎない時に,ユーザーへの入力補助に便利なツールです。MITライセンスで使用可能です。
submit機能を取り戻す
suggest.jsでインクリメンタルサーチを実装していたのですが,suggest.jsはあくまで入力補助に特化していたので,submit機能はデフォルトではついていませんでした(説明見落としてたらすみません…)。
なので,PHP等で実装するときに,選択後にsubmitまでしたいときにリターンキーを2回叩いたり,選択リストから目的のものをクリックした後に,Submitボタンを押す必要がありました。色々調べていたら,開発者の方が,submit機能を無くすための設定をしていたので,これを無くせば取り戻せそうだということが分かりました-テキストエリアでリターンキーを押した際に、submitイベントの発生を抑止する方法。
上記ブログを参照の元,プログラムを眺めたら,ちょこっとの変更で出来たので,ちょこっと紹介します。
リターンキーのsubmit機能を取り戻す。
これは, this._stopEvent(event);をコメントアウトするだけです。
以下,suggest.jsを修正しています。
…抜粋…
// key event
keyEvent: function(event) {
if (!this.timerId) {
this.timerId = setTimeout(this._bind(this.checkLoop), this.interval);
}
if (this.dispAllKey && event.ctrlKey
&& this.getInputText() == ''
&& !this.suggestList
&& event.keyCode == Suggest.Key.DOWN) {
// dispAll
this._stopEvent(event);
this.keyEventDispAll();
} else if (event.keyCode == Suggest.Key.UP ||
event.keyCode == Suggest.Key.DOWN) {
// key move
if (this.suggestList && this.suggestList.length != 0) {
// ここをコメントに
// this._stopEvent(event);
this.keyEventMove(event.keyCode);
}
} else if (event.keyCode == Suggest.Key.RETURN) {
// fix
if (this.suggestList && this.suggestList.length != 0) {
// ここをコメントに
// this._stopEvent(event);
this.keyEventReturn();
}
} else if (event.keyCode == Suggest.Key.ESC) {
// cancel
if (this.suggestList && this.suggestList.length != 0) {
this._stopEvent(event);
this.keyEventEsc();
}
} else {
this.keyEventOther(event);
}
},
クリックで選択後にsubmit機能を追加
これは,意図的にsubmit機能を与えることで解決させました。
まず,suggest.jsを呼び出しているhtmlのformに名前をつけておきます。
ここでは,"post"としました。
…抜粋…
<form action="results.php" name="post">
<input id="text" type="text" name="pattern" size="30" value="" autocomplete="off" />
<div aline="center" id="suggest" style="display:none" tabindex="-1"></div>
<input type="submit" value="Search" />
<input type="reset" value="Reset">
</form>
これをsuggest.jsでクリックした際に実行させるようにします。
…抜粋…
listClick: function(event, index) {
this.changeUnactive();
this.activePosition = index;
this.changeActive(index);
post.submit();
this.clearSuggestArea();
this.moveEnd();
},
以上でsubmit機能は,復活&追加できるはずです。
I hope this will be of some help :-)