Question

I’ve got a Google Searchbar-type input field. When I type in a couple characters and wait for half a second it runs the ajax call to an external website I’ve set in the “source” function of the autocomplete code and once it has returned the results it returns it to the screen (like it should).

The problem is that while the ajax call is being run to fetch the results it won’t allow me to continue typing in the input field until the ajax call has completed.

How can I get it to allow me to continue typing while the ajax call is being made?

Here is my jQuery function:

$('#googleSearchbar').autocomplete({
   minLength: 2,
   autoFocus: true,
   delay: 500,
   source: function (request, response) {
     results = $.parseJSON($(this).callJson('post', 'http://my_external_url', {
       data: request.term
     }));

     response(results);
   },
   error: function (err) {
     console.error('ERROR : ' + err);
     return false;
   }
 });

Answer 1

I have a hunch you are blocking the browser when making your AJAX request. This line:

results = $.parseJSON($(this).callJson('post', 'http://my_external_url', {
  data: request.term
}));

Makes me think that $(this).callJson(...) is a synchronous request, which is going to lock up the entire browser for the duration of the request.

You need to make an asynchronous request and call the response function when that request completes. This should stop the browser from locking up.