title: Limiting search results Javascript
body: <p>I was wondering how to limit the search result in the Javascript file, my JS file details as following:</p>
  
  <pre><code>    /* JS File */
     &lt;script&gt; 
      // Start Ready
      $(document).ready(function() {  
  
          // Icon Click Focus
          $('div.icon').click(function(){
              $('input#search').focus();
          });
  
          // Live Search
          // On Search Submit and Get Results
          function search() {
              var query_value = $('input#search').val();
              $('b#search-string').html(query_value);
              if(query_value !== ''){
                  $.ajax({
                      type: "POST",
                      url: "search.php",
                      data: { query: query_value },
                      cache: false,
                      success: function(html){
                          $("ul#results").html(html);
                      }
                  });
              }return false;    
          }
  
          $("input#search").live("keyup", function(e) {
              // Set Timeout
              clearTimeout($.data(this, 'timer'));
  
              // Set Search String
              var search_string = $(this).val();
  
              // Do Search
              if (search_string == '') {
                  $("ul#results").fadeOut();
                  $('h4#results-text').fadeOut();
              }else{
                  $("ul#results").fadeIn();
                  $('h4#results-text').fadeIn();
                  $(this).data('timer', setTimeout(search, 100));
              };
          });
  
      });
  &lt;/script
  </code></pre>
  
  <p>I just need to add similar to following code to be able to load a loading images before the result and limit the results into five or whatever, and if possible add load more later.</p>
  
  <pre><code>    &lt;script&gt;
  function loadSearch(query) {
      document.body.style.overflow='hidden';
      if (typeof xhr != "undefined") {
          xhr.abort();
          clearTimeout(timeout);
      }
  
      if (query.length &gt;= 3) {
          timeout = setTimeout(function () {
              $('#moreResults').slideDown(300);
              $('#search_results').slideDown(500).html('&lt;br /&gt;&lt;p align="center"&gt;&lt;img src="http://www.tektontools.com/images/loading.gif"&gt;&lt;/p&gt;');
              xhr = $.ajax({
                  url: 'http://www.tektontools.com/search_results.inc.php?query='+encodeURIComponent(query),
                  success: function(data) {
                    $("#search_results").html(data);
                  }
              });
          }, 500);
      } else {
          unloadSearch();
      }
  }
  function unloadSearch() {
      document.body.style.overflow='';
      $('#search_results').delay(100).slideUp(300);
      $('#moreResults').delay(100).slideUp(300);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have got the 2nd code from another template page, and I am just failing to adjust it to fit my search template (1st code), I'd appreciate it if someone could help me to adjust it, thanks a lot.</p>