jQuery Text Change Event を使って twitter をインクリメンタル検索するサンプルを書いた
jQuery Text Change Eventってのを見つけた。jQuery のカスタムイベントを定義するプラグインで、テキストボックス、テキストエリアの内容が変わるたびにイベントが発生するようになる。
キー入力をイベントで処理するのってかなりめんどくさいんだけど、これで「テキストボックスに入力があるたびに何かする」みたいなことが簡単にできるようになる。
イベント一覧
具体的には以下の3つのイベントが発生するようになる。
- textchange
- テキストの内容が変わったときに発生するイベント
- hastext
- テキストが空の状態から何か入力されたときに発生するイベント
- notext
- テキストが空でない状態から空になったときに発生するイベント
使い方はこんな感じ。
$('#inputbox').bind('textchange', function(event, previousText) { $('#outputbox').text(previousText + $(this).val()); });
その他、サンプルコードは本家のページを参照。
twitter をインクリメンタル検索するサンプル
というわけで僕もさっそく使ってみた。入力するたびにインクリメンタルに twitter 検索ができる。
まずは HTML ページから。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="application/javascript" src="jquery-1.4.2.min.js" ></script> <script type="application/javascript" src="jquery.textchange.min.js" ></script> <script type="application/javascript" src="twitterIncSearch.js" ></script> <title>jQuery Text Change Event を使って twitter をインクリメンタル検索する</title> </head> <body> <p> <input id="query-area" type="text" value=""> </p> <ul id="search-result"></ul> </body> </html>
単に input と ul があるだけ。
で、次に twitterIncSearch.js の中身。こっちがメイン。
$(function() { // twitter 検索リクエストを送信する function searchTwitter(query) { var url = "http://search.twitter.com/search.json"; $.ajax({ url : url, data : { lang : "ja", locale : "ja", rpp : "15", q : query }, dataType : "jsonp", timeout : 700, success : function(data, dataType) { if (data !== null && data.results !== null) { showData(data.results); } } }); } // 受信した検索結果をページに表示する function showData(results) { var container = $("#search-result"); container.html(""); for (var i = 0; i < results.length; i++) { var userUrl = "http://twitter.com/" + results[i].from_user; var li = $("<li></li>"). append( "<span>" + "<a href='" + userUrl + "'>" + "<img alt='profile_image' src='" + results[i].profile_image_url + "' />" + "</a>" + "</span>"). append( "<span>" + "<a href='" + userUrl + "'>" + results[i].from_user + "</a>" + "</span>"). append("<span>" + results[i].text + "</span>"); container.append(li); } } // textchange イベントに登録する var timeout = null; $("#query-area").bind("textchange", function() { if (timeout) { clearTimeout(timeout); } var query = $.trim($(this).val()); if (query === "") { return; } timeout = setTimeout(function() { searchTwitter(query); }, 900); }); });
JavaScript のコードは gist にも貼っておいた。
スクリーンショット
使ってみた結果はこんな感じ。
テキストボックスに入力するたびに下がぐりぐり変わる。
僕はインクリメンタルになんかやるの大好きだし(エンター押すのめんどくさい)、ほんとにありがたいプラグインだと思う。うまく使えばかっこいいページが作れると思うよ。