Geek Answers Handbook

How to invoke jquery auto-complete multi-user auto-search option

I use this automatic full library: http://jqueryui.com/demos/autocomplete/#multiple-remote

I was wondering if anyone knows how to run an automatic search without typing anything in the text box. that is, if we want to display the list in the button click event. this seems to be a "search" method. But I can’t make it work.

Please note that auto offer data comes from a web service. If the user enters something into the text box, the sentence changes accordingly. those. The entered data goes to the service and returns the offer. The entry has the form "Name, location". As a result, different types of sentences are displayed for different input parts.

Codes:

interface:

<div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds" size="50" /> </div>

Script:

 <script> $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { return false; }, select: function( event, ui ) { var terms = split( this.value ); terms.pop(); terms.push( ui.item.value ); terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); </script>

If I type anything, it sends a request to search.php. I tried changing the logic of "term.length <2" to "term.length <= 0". This works, but I have to press the spacebar. Then the empty space is placed in the text box and sends a request to the server. But I do not want to enter anything there. Hope this helps.

+4
source share
1 answer

If you want to invoke a search at the click of a button, you must invoke the search method. If you want to show all the parameters, call the search with the value set to an empty string and set the autocomplete widget to accept minLength: 0.

So in the code:

interface

 <div class="ui-widget"> <label for="birds">Birds: </label> <input id="birds" size="50" /> <input type="button" id="search-trigger" value="Trigger" /> </div>

Script

 <script type="text/javascript"> $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } // Button listener that triggs the search event $("#search-trigger").click(function(){ var searchTerm = $( "#birds" ).val(); $( "#birds" ).autocomplete( "search" , searchTerm); }); $( "#birds" ) .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: ["lorem", "ipsum", "dolor"], /* Commented this out to use dummy data above function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); },*/ search: function() { var term = extractLast( this.value ); /* What is this check for? if ( term.length < 2 ) { return false; }*/ }, focus: function() { return false; }, select: function( event, ui ) { var terms = split( this.value ); terms.pop(); terms.push( ui.item.value ); terms.push( "" ); this.value = terms.join( ", " ); return false; }, //Added for "show all" support minLength: 0 }); }); </script>

Is this the behavior you are looking for?

Link: http://jqueryui.com/demos/autocomplete/#method-search

+1
source

More articles:


All Articles