jquery - Bootstrap - add a loading state to an input box? -

i have got input box:

        <div id="mydiv" class="col-sm-10">             {# autocomplete text box #}             <input class="form-control" type="text" name="myautocomplete" id="myautocomplete1">         </div> 

and have jquery initialise textbox becomes "autocomplete" box, user types in few letters , can select match list.

when jquery loads data (there quite bit, 10,000 entries) takes bit of time - maybe 5 seconds. if user types autocomplete box during time, autocomplete doesn't work because data hasn't finished loading.

how can add "loading state" input text field? want similar sort of functionality http://getbootstrap.com/javascript/#buttons - after period of time instead of saying "loading..." becomes active.

thanks

figured out:

i made js function:

function addloadingtotextbox(textboxes, text, onload) {     (i = 0; < textboxes.length; i++) {         if (onload) {             $(textboxes[i]).prop('disabled', 'true'); // disable             $(textboxes[i]).val(text); // add loading text         }          else {             $(textboxes[i]).removeattr('disabled'); // re-enable             $(textboxes[i]).val(''); // remove loading text         }     } } 

then call when have started loading data (this disable box , make loading.....):

addloadingtotextbox([$('#myautocomplete1')], 'loading.....', true); 

and reverse that, run:

addloadingtotextbox([$('#myautocomplete1')], '', false); 

because textboxes parameter takes array, can pass in multiple elements @ once (which handy if doing bulk-load data).

hopefully helps else.