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.

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
– James Daly, Commented Dec 9, 2012 at 22:25
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
– Rod, Commented Dec 9, 2012 at 22:29
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
– James Daly, Commented Dec 9, 2012 at 22:36

Rick Hanlon II · Accepted Answer · 2014-01-09 18:07:08Z

2

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.

edited Jan 9, 2014 at 18:07

answered Mar 15, 2013 at 2:08

Rick Hanlon II

22k7 gold badges49 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kevin D. Over a year ago

api.jqueryui.com/autocomplete/#event-close seeing as ui is always empty and only included for consistency, I'm pretty sure this does not work.

Rick Hanlon II Over a year ago

Thanks, the change event is what I meant. It fires on blur and ui.item is null if nothing was selected. Updated.

Collectives™ on Stack Overflow

jQuery restrict text box input using autocomplete

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related