Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery autocomplete: How to show an animated gif loading image

I'm using the jQuery AutoComplete plugin combined with ajax. Do you know how can I show a progress indicator while the ajax search is performed?

This is my current code.

<script type="text/javascript">     $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers'); </script>  <div>     <input type="text" id="autocomplete-textbox" />     <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span> </div> 

The FindUsers URL returns a user list in the content.

like image 276
Daniel Peñalba Avatar asked Dec 20 '10 12:12

Daniel Peñalba


2 Answers

autocomplete already adds the ui-autocomplete-loading class (for the duration of the loading) that can be used for this...

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center } 
like image 200
Sam Wilson Avatar answered Sep 18 '22 17:09

Sam Wilson


$("#autocomplete-textbox").autocomplete ( search  : function(){$(this).addClass('working');}, open    : function(){$(this).removeClass('working');} ) 

where CSS class working is defined as follow:

.working{background:url('../img/indicator.gif') no-repeat right center;} 

EDIT

Sam's answer is a better approach to address the problem

like image 38
Dalen Avatar answered Sep 21 '22 17:09

Dalen