javascript - How to open the Jquery autocomplete with a fetching results status bar -

javascript - How to open the Jquery autocomplete with a fetching results status bar -

i'm using jqueryui autocomplete. fetching of results isn't immediate i'd notify user autocomplete fetching options match query.

my code:

$( "#searchid" ).autocomplete({ source: "/autocomplete_url.php", minlength:3, select: function(event, ui) { event.preventdefault(); $("#searchid").val(ui.item.value); $("#formid").submit(); } });

how can create autocomplete open 'fetching results status bar' when sending request web-service working on finding results?

this approach assumes you're using ajax phone call retrieve dataset, i've used similar , worked ok.

set div on page want message.

html:

<div id="autocompletestatus" style="display:none">loading data...please wait</div>

you want grab key event on autocomplete:

jquery:

$( "#searchid" ).keyup(function() { $('#autocompletestatus').show(); });

then autocomplete this:

$( "#searchid" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "/autocomplete_url.php", datatype: "json", data: { style: "full", maxrows: 12, name_startswith: request.term }, success: function( info ) { $("#autocompletestatus").hide(); // <== hide here response( $.map( data.returndata, function( item ) { homecoming { label: item.name, value: item.value } })); } }); }, minlength:3, select: function(event, ui) { event.preventdefault(); $("#searchid").val(ui.item.value); $("#formid").submit(); } });

so short version: key on search box shows div, on homecoming ajax phone call (i'm using sample parameter names, illustration didn't give actual names), hide div again.

javascript jquery css3 jquery-ui autocomplete