Ajax Calls

Ajax Calls

I've got the code below to produce a search facility like Google Suggests.

When a users presses a key an ajax call is made and retrieves the search results.

The problems I have is that when a user types a lot of characters and finishes the system is still sending and completing each key down request.

Resulting in the search results flicking on and off and confusing the user.

Is it possible to stop ajax calls if another call has been made?


$(function() {
   $("#txt1").keyup(function() {
      var1 = $(this).attr('value');
      
      $.ajax({
         url: "./hint.asp?q=" + var1,
         cache: false,
         success: function(html) {
                   setTimeout(function() {
                     $('#results').empty().append(html).show();
                      $("#txt1").removeClass('load');
                  },100);
         },
         error: function (XMLHttpRequest, textStatus, errorThrown) {
                  setTimeout(function() {
                     $('#results').empty().append(XMLHttpRequest.responseText).show();
                      $("#txt1").removeClass('load');
                  },100);
         }
      });   
      return false;
   });
});


$(document).ready(function() {
    /*shows the loading div every time we have an Ajax call*/
    $('#txt1').bind("ajaxSend", function(){
      $(this).addClass('load');
     }).bind("ajaxComplete", function(){
      //$(this).removeClass('load');
     });

$(document).click(function(){
   $("#results").hide();
});


<form id="phone" action="phonelist.asp" method="post" style="display:inline;">
   <input name="txtPhone" id="txt1" type="text" value="<%=txtPhone%>" size="16">
   <input type="submit" name="Submit" value="Search"/>
</form>


<div id="results"></div><!--end results-->