Auto suggest with two input boxes

Question

I have the exact same problem as this question:
auto suggest php ajax with two input boxes not working with the given sample code

However on trying the suggestions I still have the same problem.
I have two input boxes that I wanted an auto suggest from a db.
However the auto suggestion only appears below one of the boxes not matter which field is typed in.
This is what I have ended up with after the suggestions in the question linked at top.

<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 have tried this with 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 input into one then both appear, obviously not what I need but shows that it sees them. Seems like it doesn't like to have two scripts.

Any help would be fantastic. Cheers everyone in advance.

Also if anyone knows how I can then scroll through the auto suggested results with keyboard up and down buttons that would be icing on cake!!

Any reason why you are reinventing the wheel here? [jQuery UI](http://jqueryui.com/autocomplete/) has a auto-complete widget, which supports a remote datasource. — atomman, Jan 11 '13 at 00:59
@atomman All I need to know now is how to sort the order of the suggestion results so that if the letter 'M' is typed then all results that start with 'M' appear first. At the moment it finds all words with the letter 'M' anywhere in the word, but orders it alphabetically from the first letter. If that makes any sence at all... have tried doing an order by in the database select but to no avail. — J Allen, Jan 12 '13 at 11:16
Code Im using. script: `$(function() { $( "#customersearch" ).autocomplete({ source: "/templates/autosuggest/customersuggest.php", select: function( event, ui ) { var selectedObj = ui.item; } }); });`and db select: `$search = $_GET['term']; $letter = substr($search, 0, 1); $req = "SELECT Customer FROM Customers WHERE Customer LIKE '%$search%' ORDER BY Customer LIKE '%$letter%'";` — J Allen, Jan 12 '13 at 11:17
Have a look at [`order by case`](http://stackoverflow.com/questions/3609166/mysql-order-by-like) you could probably solve the problem with that. — atomman, Jan 12 '13 at 19:10
`SELECT Customer FROM Customers WHERE Customer LIKE '%$search%' ORDER BY CASE WHEN Customer LIKE '$search%' THEN 1 ELSE 2 END` Something like this probably, not tested though. — atomman, Jan 12 '13 at 19:14

score 2 · Accepted Answer · edited May 23 '17 at 12:18

I would suggest using jQuery UI which has an auto-complete 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 );
    }
});

Answer to comment

To customize the sequence in which the auto-completed suggestions come you can change your SQL-query to use order by case. The below query would return all results that starts with $search before other results that just contains it at some point.

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

Auto suggest with two input boxes

1 Answers1