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 class="pagination pagination-centered"><div class="pagination">
      <ul id="search_pagination">
      </ul>
    </div>
  </div>

  </div>
</div>
<script>
var interval = 0;
var keyword;
var searchLock=false;
var results;

var Search = function(){
  var s = this;
  this.init = function(){
    $("#q").bind("input", function() {s.queueSearch();});

    $("#search_form").submit(function(){s.queueSearch(); return false; });
    $("#search_close").click(function(){$("#search_container").fadeOut(300);});
  }

  this.queueSearch = function(){
    if($("#q").val() != keyword && $("#q").val()!=""){
      keyword = $("#q").val();
      interval=500;
      if(!searchLock) s.processSearch();
    }else if($("#q").val()==""){
      keyword = "";
      $("#search_container").slideUp(300);
    }
  }
  this.processSearch = function(){
    keyword_tmp = keyword;
    searchLock = true;
    if(interval==0 && keyword!=""){
      $("#search_time").html("");
      $("#search_results").scrollTop(0);
      $("#search_results").html('<img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50">');
      $("#search_pagination").html("");
      $("#search_container").slideDown(300);

      $.getJSON("/site_search", {"keywords" : keyword}, function(data){
        if(keyword_tmp != keyword) {
          searchLock = false;
          s.processSearch();
          return;
        }

        results = data.results;

        $("#search_time").html("Found "+results.length+" Results, Search Time: "+data.time+"ms");

        renderResults(1);
        searchLock = false;
      });
    }else if(interval>0){
      interval -= 100;
      setTimeout(s.processSearch,100);
    }else if(keyword==""){
      searchLock = false;
    }
  }

  s.init();
}();

function renderResults(page){
  var rangeStart = ((page-1)==0) ? 0 : ((page-1)*5)-1;
  var tmpResults = results.slice(rangeStart, rangeStart+5);

  $("#search_results").scrollTop(0);
  $("#search_results").html("");
  $.each(tmpResults,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);
  });
  renderPagination(page);
}

function renderPagination(page){
  var totalPages = Math.round(results.length/5);
  var startPage = ((page-5)<=0) ? 1 : page-5;
  var ednPage = ( (startPage+10)>totalPages ) ? totalPages : (startPage+10);

  if( (ednPage-startPage)<10 && totalPages>10 ){
    startPage = ednPage-10;
  }

  $("#search_pagination").html("");

  for(var i=startPage;i<=ednPage;i++){
    var active = (i==page) ? "active" : "";
    $("#search_pagination").append('<li class="page '+active+'"><a href="#" onclick="renderResults('+i+');">'+i+'</a></li>');
  }

  if(page<totalPages){
    $("#search_pagination").append('<li class="next"><a href="#" onclick="renderResults('+(page+1)+');"><span>Next</span></a></li>');
    $("#search_pagination").append('<li class="last"><a href="#" onclick="renderResults('+totalPages+');"><span>Last</span></a></li>');
  }
  if(page!=1){
    $("#search_pagination").prepend('<li class="first"><a href="#" onclick="renderResults('+1+');"><span>First</span></a></li>');    
  }
}

</script>