読者です 読者をやめる 読者になる 読者になる

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 にも貼っておいた

スクリーンショット

使ってみた結果はこんな感じ。

テキストボックスに入力するたびに下がぐりぐり変わる。

僕はインクリメンタルになんかやるの大好きだし(エンター押すのめんどくさい)、ほんとにありがたいプラグインだと思う。うまく使えばかっこいいページが作れると思うよ。