jQuery IU Autocomplete

Question

I using jQuery-UI Autocomplete. When user types some text autocomplete send async request. But user not waiting response and moves to other input. How i can cancel request?

Answer 1

You can cancel an ajax request. Take a look at this:

http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery

You should be able to bind a focusout event to your input that will kill the ajax request.

Answer 2

I have got he same problem. It is now clear, how i can cancel the request if a have it as a variable. But how can i bind the autocomplete request to a variable?

My setup looks very similar to one of the exmaple from the official jquery-ui site:

 $( "#city" ).autocomplete({
   source: function( request, response ) {
    $.ajax({
     url: "http://ws.geonames.org/searchJSON",
     dataType: "jsonp",
     data: {
      featureClass: "P",
      style: "full",
      maxRows: 12,
      name_startsWith: request.term
     },
     success: function( data ) {
      response( $.map( data.geonames, function( item ) {
       return {
        label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
        value: item.name
       }
      }));
     }
    });
   },
   minLength: 2,
   select: function( event, ui ) {
    log( ui.item ?
     "Selected: " + ui.item.label :
     "Nothing selected, input was " + this.value);
   },
   open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
   },
   close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
   }
  });

Can anybody tell me how to get and cancel the AJAX-Request here ?