JQuery UI AutoComplete - ¿Cómo implementar el indicador de progreso?

Question

Si el título de la pregunta no estaba lo suficientemente claro:

Estoy usando el complemento jQuery Autocomplete (parte de jQuery ui 1.8.5)

¿Hubiera pensado que el CSS/imágenes suministrados incluiría una imagen de progreso similar a AJAX?

Si no, ¿cuál es la forma más fácil de crear una?

Este es mi código automático:

$('#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).
   }});

¿Dónde debo ocultar/mostrar una imagen en el código de arriba?

Obviamente, después del código en "Seleccionar", podría ocultar una imagen, pero ¿dónde puedo "mostrar" la imagen?

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).
   }});