Question

I would like to be able to show a loading icon in the autocomplete dropdown while the searching is happening. How can I go about doing this?

Current code:

$("#searchbox").autocomplete({
  search: function(event, ui) {
    $('ul.ui-autocomplete').append("<li id='loading_icon'></li>");
    $('ul.ui-autocomplete').show();
  },
  open: function(event, ui) {
    $('#loading_icon').hide();
  }
 ...

But what happens is the icon shows at the very top left of the browser page. The computing of the location hasn’t happened yet. Can i somehow make a call to compute the location of the autocomplete dropdown box?

Thanks!

Answer 1

This is doable, but you’ll have to convert your source option to a function and make the AJAX request yourself. For example:

$("#selector").autocomplete({
    source: function (request, response) {
        /* Show the loading indicator while a search is in progress */
        response([{ label: "Loading...", loading: true }]);
        $.ajax({
            url: "your_url_here",
            data: request,
            type: "GET",
            dataType: "json"
        }).success(response);
    },
}).data("autocomplete")._renderItem = function (ul, item) {
    var $li = $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);

    /* Make sure nothing happens when you click "Loading" */
    if (item.loading) {
        $li.find("a").on("click", false);
    }
};

The last bit that overrides _renderItem is doing so so that we can cancel the click event of the loading item (and prevent it from being placed in the input).

Example: http://jsfiddle.net/m3MGH/

---

Update, per comment below:

To show a loading image in a div, you could do something like this (just changing the _renderItem function):

.data("autocomplete")._renderItem = function(ul, item) {
    var $li = $("<li></li>");

    if (item.loading) {
        $li.append("<div>Loading<img src='my_loading_img' /></div>").appendTo(ul);                
    } else {
        $li.data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
    }

    return $li;
};

You’ll probably have to use a little CSS to get things positioned just right, but this should get you started.