インスタント検索

キー入力するたびに検索結果が切り替わる、インスタント検索。

instant-search.js

$( document ).ready( function(){
  $( "#queryText" ).keyup( setTimeoutForSearch );
} );

// Ajax でサーバに検索を要求し、検索結果を表示する
function ajaxSearch( query ){
  $.ajax( {
    type: "GET",
    url: "search.php",
    data: query,
    dataType: "html",
    success: function( html ){
      $( "#resultDiv" ).html( html );
    }
  } );
}

// タイムアウト時に検索を実行するようにタイマーをセットする
TIMEOUT_IN_MILLISECONDS=500;
var searchTimer=null;
function setTimeoutForSearch(){
  if( searchTimer!=null )
  {
    window.clearTimeout( searchTimer );
  }

  searchTimer=window.setTimeout( function(){
    ajaxSearch( $( "#queryText" ).val() );
    searchTimer=null;
  }, TIMEOUT_IN_MILLISECONDS );
}