orbit-4-2/app/views/layouts/_search.erb

<div id="search_container">
  <div id='search_head'>
    <button type="button" id="search_close" class="close pull-left">&times;</button>
    <div id='search_time'></div>
  </div>
  <div id='search_results'></div>
  <div id='search_footer'></div>
</div>
<script>
  var interval = 0;
  var keyword;
  var processLock=false;

  $("#q").keyup(function(){queueSearch();});
  $("#search_form").submit(function(){queueSearch(); return false; });

  function queueSearch(){
    if($("#q").val() != keyword && $("#q").val()!=""){
      keyword = $("#q").val();
      interval=500;
      if(!processLock) processSearch();
    }else if($("#q").val()==""){
      keyword = ""
      $("#search_container").fadeOut(300);
    }
  }

  $("#search_close").click(function(){$("#search_container").fadeOut(300);});

  function processSearch(){
    keyword_tmp = keyword;
    processLock = true;
    if(interval==0 && keyword!=""){
      $.getJSON("/site_search?keywords="+keyword, function(data){
        if(keyword_tmp != keyword) {
            processLock = false;
            processSearch();
            return;
          }
        $("#search_results").scrollTop(0);
        $("#search_results").html("");
        $("#search_time").html("Found "+data.results.length+" Results, Search Time: "+data.time+"ms");
        $.each(data.results,function(key,res){
          search_result = 
            "<div class='search_result'>"+
            "<a href='"+res.url+"' target='_blank'>"+
              "<div class='seach_title'>"+res.title+"</div>"+
            "</a>"+
            "<span>"+res.content+"</span>"+
            "</div>";
          $("#search_results").append(search_result);
        });
        $("#search_container").fadeIn(300);
        processLock = false;
      });
    }else if(interval>0){
      interval -= 100;
      setTimeout(processSearch,100);
    }
  }
</script>