title: Reduce number of ajax calls in instant search
body: <p>I am trying to make an instant search drop down for my site. All work fine, except for this.</p>
  
  <pre><code>var timeOut;
  $('#search input[name=\'search\']').on('keyup', function(e) {
      // If enter - submit the search field
      if (e.keyCode == 13) {
          $('header input[name=\'search\']').parent().find('button').trigger('click');
      }
      // Call only when length is at least 2 and the key pressed is alphanumeric
      else if ($('#search input[name=\'search\']').val().length&gt;2 &amp;&amp; ((e.keyCode&gt;=65 &amp;&amp; e.keyCode&lt;=90) || (e.keyCode&gt;=97 &amp;&amp; e.keyCode&lt;=122))) {
          timeOut = null;
          //alert(timeOut);
  
          if (!timeOut) {
              timeOut = setTimeout(function() {
                  $.ajax({
                      url: 'ajax.php',
                      type: 'post',
                      async: false,
                      data:  'ACTION=SEARCH&amp;search='+$('#search input[name=\'search\']').val(),
                      dataType: 'json',
                      beforeSend: function() {
                          $('#loader-icon').show();
                      },
                      complete: function() {
                          $('#loader-icon').hide();
                      },
                      success: function(json) {
                          //$('.product-list-row').html(json);
                          $('#search-listing').html(json['html']);
                      },
                      error: function(xhr, ajaxOptions, thrownError) {
                          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                      }
                  });
                  timeOut = null;
              }, 500);
          }
      }
  });
  </code></pre>
  
  <p>Problem 1: My script ends up making too many calls to the server, for some reason <code>setTimeOut</code> isn't working as I expected it to. Ajax call should only be made when the user has done typing or something like that and not at every key press.</p>
  
  <p>Problem 2: For some reason when I type fast the input bar doesn't get edited. The ajax however works, but with the last textual input.</p>