Geek Answers Handbook

Automatic bid with two input fields

I have the same issue as this question:
automatically suggest php ajax with two input fields not working with this sample code

However, trying to offer suggestions, I still have the same problem.
I have two input fields that I wanted to receive using an automatic suggestion from db.
However, the auto-offer appears only under one of the fields, which does not indicate which field is entered.
This is what I got after the suggestions in the question related from above.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> function suggest(inputString){ if(inputString.length == 0) { $('#suggestions').fadeOut(); } else { $('#customer').addClass('load'); $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#customer').removeClass('load'); } }); } } function fill(thisValue) { $('#customer').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 10); } </script> <script> function suggest(inputString){ if(inputString.length == 0) { $('#suggestionssearch').fadeOut(); } else { $('#customersearch').addClass('load'); $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestionssearch').fadeIn(); $('#suggestionsListsearch').html(data); $('#customersearch').removeClass('load'); } }); } } function fill(thisValue) { $('#customersearch').val(thisValue); setTimeout("$('#suggestionssearch').fadeOut();", 10); } </script>

And my inputs:

 <input type="text" name="Customer" value="" id="customer" onkeyup="suggest(this.value);" onblur="fill();" class="" style="height:14px; margin-top:2px;" placeholder="Search Customers" autocomplete="off"> <input type="submit"> <div id="suggestcontainer" style="margin-left:2px;"> <div class="suggestionsBox" id="suggestions" style="display: none;"> <div class="suggestionList" id="suggestionsList"> &nbsp; </div> </div> </div> <input type="text" name="Customer" value="" id="customersearch" onkeyup="suggest(this.value);" onblur="fill();" class="" style="width:90px; height:14px; margin-top:2px;" placeholder="Customer" autocomplete="off" required="required"/> <input type="submit" style="float:right;"> <div id="suggestcontainersearch"> <div class="suggestionsBoxsearch" id="suggestionssearch" style="display: none;"> <div class="suggestionListsearch" id="suggestionsListsearch"> &nbsp; </div> </div> </div>

I tried this using my script as a test:

 <script> function suggest(inputString){ if(inputString.length == 0) { $('#suggestions').fadeOut(); $('#suggestionssearch').fadeOut(); } else { $('#customer').addClass('load'); $('#customersearch').addClass('load'); $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').fadeIn(); $('#suggestionsList').html(data); $('#customer').removeClass('load'); $('#suggestionssearch').fadeIn(); $('#suggestionsListsearch').html(data); $('#customersearch').removeClass('load'); } }); } } function fill(thisValue) { $('#customer').val(thisValue); setTimeout("$('#suggestions').fadeOut();", 10); $('#customersearch').val(thisValue); setTimeout("$('#suggestionssearch').fadeOut();", 10); } </script>

This works in the sense that if I enter one, then both appear, obviously not what I need, but shows that he sees them. He seems to dislike having two scenarios.

Any help would be fantastic. Welcomes everyone in advance.

Also, if anyone knows how I can scroll automatically through the proposed results using the up and down keys that will glaze the cake!

+6
source share
1 answer

I would suggest using jQuery UI , which has an autocomplete widget.

 $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } });

Reply to comment

To customize the sequence in which auto-complete offers come in, you can change your SQL query to use for each question . The following query returns all results starting with $search in front of other results that simply contain it at some point.

 SELECT Customer FROM Customers WHERE Customer LIKE '%$search%' ORDER BY CASE WHEN Customer LIKE '$search%' THEN 1 ELSE 2 END
+2
source

More articles:


All Articles