jQuery Show / Hide Loading Image in Autocomplete Textbox

Introduction:

Here I will explain how to show or hide loading image in jQuery autocomplete textbox.

Description:
  
In previous posts I explained jQuery show loading image while page loads, jQuery autocomplete textbox with webservice, jQuery autocomplete textbox with multiple words with commas, jQuery autocomplete textbox with images and many articles relating to JQuery, asp.net, JavaScript. Now I will explain how to show or hide loading image in jQuery autocomplete textbox.
To show or hide loading image in autocomplete textbox we can follow different approaches

Method 1

Best method is to add ui-autocomplete-loading css class to show or hide loading image in jQuery autocomplete textbox while searching like as shown below

ui-autocomplete-loading { background:url('img/loading.gif') no-repeat right center }

Method 2

To show or hide loading image in jQuery autocomplete textbox we can follow another method like as shown below

search: function() { $('#smallimgload').show(); }, open: function() { $('#smallimgload').hide(); },

Complete function will be like as shown below

$('#othersubcat').autocomplete({

source: function(request, response) {

$.ajax({

url: 'AutoComplete.ashx',

dataType: "json",

data: { term: request.term },

success: function(data) {

response(data.d);

}

});

},

search: function() { $('#smallimgload').show(); },

open: function() { $('#smallimgload').hide(); }

});