jQueryUI autocomplete and progress indicator

jQueryUI autocomplete doesn’t provide native method how to show progress indicator, while your suggestion list is generated.

I managed it to do in the following way:
1. I got a suitable progress indicator from http://www.ajaxload.info/ and placed it to /img/
2. define input field for using in autocomplete method

3. create style for displaying progress indicator right in our input field

input.wait {
    background: url(/img/ajax-loader.gif) no-repeat top right;

4. and at last define autocomplete method

        search: function(event, ui) {
        open: function(event, ui) {
        source: "remote_source.php",
        minLength: 2,
        select: function(event, ui) {
            //some action on select


  1. Actually, jquery-ui adds a class to the input textbox while loading. You just need to declare your css for it.

    .ui-autocomplete-loading {
    background: white url(‘/img/ajax-loader.gif’) right center no-repeat;

  2. Which css i hav to declare that..is it the jquery ui.css you mean?..if so it is not working for me..do i hav to make any changes..

Leave a Reply

%d bloggers like this: