経緯

キーワード検索するとき、検索ボタンを押さずに、入力された時点で自動的に結果が変わるようにしたい。
でも、changeイベントは一度フォーカスをはずさないといけないから、keyupでやりたい。
そうすると、入力キーが押される度、通信が走って、サーバーに負荷をかけそう。

ってときの対処法。

対処法

ここではjQuery前提で話を進めます。HTMLは次のようなもの。

<input id="keyword" />
<ul id="result-list">
  <!-- ここに結果が反映される。 -->
</ul>

基本的には入力が終わって、しばらくしたら、Ajaxを投げる、というやり方です。

$(function(){  
  var $keyword = $('#keyword');
  var $resultList = $('#result-list');
  var url = $keyword.data('href');

  // Ajax通信を行う関数
  function send(){
    $.ajax({
      type: 'GET',
      dataType: 'html',
      data: {
        keyword: $keyword.val(),
        url: url,
        success: function(data){
          // 通信が成功したらリストを総入れ替え
          $resultList.html(data)
        }
      }
    });
  };

  var send_timeout_id = null
  $keyword.on('keyup', function(){
    // keyupされた時点で既にsendの実行が予約されていたら一旦削除
    if(send_timeout_id){
      clearTimeout(send_timeout_id);
    }
    // 500ms後にsendを実行するように予約
    send_timeout_id = setTimeout(send, 500);
  }
});

CoffeeScriptの場合

$ ->
  $keyword = $('#keyword')
  $resultList = $('#result-list')

  send = ->
    url = $productKeyword.data('href')
    $.ajax(
      type: 'GET'
      dataType: 'html'
      data:
        keyword: $productKeyword.val()
        url: url
        success: (data) ->
          $productList.html(data)
    )

  send_timeout_id = null
  $productKeyword.on 'keyup', ->
    clearTimeout(send_timeout_id) if send_timeout_id
    send_timeout_id = setTimeout(send, 500)

まとめ

Ajaxを使うとUX的にはいいものになる場合も、ヘタすると、サーバーへの無駄な負荷をかけることにもなりかねません。
いつ、どのくらいの頻度で通信が行われるのかしっかり意識しておきましょう。