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

$("input#sugest").autocomplete({
        search: function(event, ui) {
            $(this).addClass("wait");
        },
        open: function(event, ui) {
            $(this).removeClass("wait");
        },
        source: "remote_source.php",
        minLength: 2,
        select: function(event, ui) {
            //some action on select
        }
    });

4 comments

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

    .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: