Completamento automatico dell'interfaccia utente di jQuery - Come implementare l'indicator di progresso?

Question

Se il titolo della domanda non era abbastanza chiaro:

Sto usando il plug -in JQuery Autocomplete (parte di JQuery Ui 1.8.5)

Avrei pensato che il CSS/Immagini fornito includesse un'immagine di avanzamento simile all'Ajax?

In caso contrario, qual è il modo più semplice per crearne uno?

Questo è il mio codice di completamento automatico:

$('#query').autocomplete({
   source: function (request, response) {
      $.ajax({
         url: "/Search/FindLocations",
         type: "POST",
         dataType: "json",
         data:
         {
            searchText: request.term
         },
         success: function (data) {
            response($.map(data, function (item) {
               return { name: item.name, value: item.name }
            }))
         }),
   select: function (event, ui) {
      // snip... (this is where i display stuff about what they clicked).
   }});

Dove devo nascondere/mostrare un'immagine nel codice sopra?

Ovviamente dopo il codice in "Seleziona", potrei nascondere un'immagine, ma dove posso "mostrare" l'immagine?

Answer 1

$('#query').autocomplete({
   source: function (request, response) {
      //i would show the image here, before starting your ajax request
      $("#theImage").show();
      $.ajax({
         url: "/Search/FindLocations",
         type: "POST",
         dataType: "json",
         data:
         {
            searchText: request.term
         },
         success: function (data) {
            response($.map(data, function (item) {
               return { name: item.name, value: item.name }
            }))
         }),
   select: function (event, ui) {
      // snip... (this is where i display stuff about what they clicked).
   }});