検索窓に入力補完機能を実装してみた

|
Clip to Evernote 検索窓に入力補完機能を実装してみた

jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる : アシアルブログ

面白そうだったので,実装してみた.簡単すぎて,拍子抜け.

jquery.suggestのサイト等から以下の4ファイルを入手する.

search.phpsは参考にするだけなので,実際には使わなかったです・・・.続いて,MT側にテンプレートを作成します.インデックステンプレートに新しいカスタムインデックステンプレートを作成します.ファイル名等は適当に決めて下さい.コードも一部書き換えています.

080518_jquery1.png

このテンプレートによって作成されるsearch.phpは以下のような感じ.一部抜粋.

080518_jquery2.png

ここまでできれば,完成したようなもの.次に,検索窓がどのような設定になっているかを,適切なテンプレートを開くか,ページのソースを開くか何かして,確認します.

080518_jquery3.png

このブログではid="search"が設定されていることが確認できます.仕上げに,jqueryなスクリプトが走るように,ヘッダを書き換える.モジュールテンプレートのヘッダに次のように追記する.

080518_jquery4.png

赤線を引いた部分が検索窓のidと一致するようにします.気をつけるのはそこだけ.簡単だねっ!

実装結果

080518_jquery5.png

ね.簡単でしょ?(ボブ風)

プロフィール

e-m@il @ddress