Twitter Incremental Search

JSONPを利用したTwitter Incremental Searchを作ってみました。

前回(JSONPを利用したTwitter Search )のやや応用。検索をインクリメンタルサーチ対応させました。Win+IE, Firefoxで確認済。今回もTwitter.FMにお世話になっています。いつの間にやら日本語通るようになっていてイィ感じに!

事の発端は嶋くんから「prototype.js使ったインクリメンタルサーチを教えて!」と言われて。「すぐ対応するよ!」と言いつつ、やや放置していたのでサックリ作ってみました。以下、簡単な解説。

検索を行うJSONPの仕掛けについては前回を参考にしていただくことにして、今回はインクリメンタルサーチにのみにフォーカス。ポイントは

Form.Element.Observer(監視対象エレメントID, 監視間隔(秒),関数オブジェクト);

です。

Form.Element.Observerは、常にフォームの値が変化しているかどうかを監視し、変化があると指定した関数を実行します。監視対象エレメントは、この場合inputエレメント(id="query")になります。

監視間隔は今回は毎秒行っています。間隔が小さい方がサクサク感は出ますが、もちろんサーバの負荷はそのときと比べて大きくなります。また、関数オブジェクトは、前回作成したsearchTwitter()を指定しています。

ポイントとして、Form.Element.Observerは一度監視を開始すると、その解除を行うことは少なくとも標準のprototype.jsでは、できません。このあたりの話は「Form.Element.Observerをクリアする」でも書いていますが、prototype.jsを上書きして、clearIntervalを呼ぶようにします。ここで利用しているprototype.jsは、修正を加えたものにしています。

このあたりの処理は、検索以外にもフォームの入力値チェックにも使えますし、応用範囲は結構ありそうなので、一度手を動かしておいてやり方を身に付けておいて損は無いと思います。

関連広告

Trackbacks:0

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/58
Listed below are links to weblogs that reference
Twitter Incremental Search from blog.katsuma.tv

Home > Javascript > Twitter Incremental Search

Search
Feeds

Return to page top