How do I change the selected item in a dropdown based on user input in a text box?

Question

I have a select dropdown that could possibly contain over 1000 items for a large customer.

<select name="location" id="location">
    <option value="1">Store# 1257</option>
    <option value="2">Store# 1258</option>
    ...
    <option value="973">Store# 8200</option>
    <option value="974">Store# 8250</option>
    <option value="975">Store# 8254</option>
    <option value="976">Store# 8290 Fuel Center</option>
</select>

I also have a text box and when the user types in text I want to move the selected item in the dropdown.

For example, if the user types 82 then I want to move to the first item in the box where an 82 exists which would be value 973. If the user types 825 then move to 974, etc. If the user types Fuel, find the first option containing that string.

I am currently using jquery as my javascript library.

What do you suggest for solving this? Should I switch to an autocomplete? If so I need something that has a arrow to dropdown the entire list as some customers may only have 3 or 4 to select from.

Thanks.

Answer 1

Given a variable searchFor that contains the search string, you can select the first option that contains that text with this jquery snippet:

$("#location option[text*=" + searchFor + "]:first").attr("selected", true);

So if you have a text input with the id selectSearchBox, you could write it like this:

$("#selectSearchBox").keyup(function () {
     var searchFor = $(this).val();
     $("#location option[text*=" + searchFor + "]:first").attr("selected", true);
});

Answer 2

Using jQuery autocomplete plugin might be the best option for you. You can have a look at a previous answer here on SO (please, don't do that select => array translation, use an array or a server side script).