jQuery restrict text box input using autocomplete

Question

I'm using jQuery UI's autocomplete to try to propagate the correct input for a form, with over 1000 vaules.

The autocomplete works fine, but how do I restrict the value of the field to just those values?

Autocomplete code in the form:

$('#animal').autocomplete({
    source: "search_species.php",
    minLength: 3,
    select: function(event, ui) {
        $('#animal').val(ui.item.postcodes);
        $('#code').val(ui.item.code);
        $('#family').val(ui.item.family);
    }
});

Code in autocomplete source:

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
$return_arr = array();

if ($conn){
    $fetch = mysql_query(
        "SELECT * FROM animals where animals like '%" . mysql_real_escape_string($_GET['term']) . "%'"
    ); 

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['animals'];
        $row_array['family'] = $row['family'];
        $row_array['code'] = $row['code'];
        array_push($return_arr,$row_array);
    }
}  

mysql_close($conn);
echo json_encode($return_arr);

As I said, the autocomplete works. I just need to know how to limit the values in the text field to those in the search so that people can't type in their own values.

Thanks in advance.

not sure you can stop people from typing another value in the input but you can prevent people from submitting it - store all those autocomplete values in a javascript array and when someone submits the form you can check against those values to make sure it's one of them by doing a loop through it when doinng .submit(funciton() {}) Couldn't you just make this a select list if you only want them to choose from specific values? — James Daly
Only problem is the list contains about 1000 animals and relevant codes. Its for a wildlife rescue organisation where all members have to enter a specific animal to bring up its wildlife code. — Rod
is it possible to filter the list down further maybe or you could call a funciton on .blur(function(){ //see if values match }) instead of doing .submit() — James Daly

Rick Hanlon II Rick Hanlon II · Accepted Answer · 2013-03-15T02:08:28

There are a few ways you can go about this.

One way is to clear the input value if nothing from the dropdown was selected, and force the field to be non-empty when it's submitted. A good way to clear the value is to use the autocomplete event for when the menu changes or closes, which is named change. This event fires if either an item is selected, or the input loses focus. If the user did not select an item from the menu, then the ui.item value will be null and you can clear the typed value left in the input.

You could implement the method like this:

$('#animal').autocomplete(
    {
        source: "search_species.php",
        minLength: 3,
        select: function(event, ui) {
            $('#animal').val(ui.item.postcodes);
            $('#code').val(ui.item.code);
            $('#family').val(ui.item.family);
        },
        change: function(event, ui) {
            if(ui.item === null || !ui.item)
               $(this).val(''); /* clear the value */
        }
    });

From here it's straightforward to add a check in your form validation, or whatever you're using, to prevent the user from moving on unless an item was chosen--by ensuring the input value is non-empty.

jQuery restrict text box input using autocomplete

1 Answers