如何根据文本框中的用户输入更改下拉列表中的选定项目？答案

【问题标题】：How do I change the selected item in a dropdown based on user input in a text box?如何根据文本框中的用户输入更改下拉列表中的选定项目？
【发布时间】：2009-03-06 11:51:12
【问题描述】：

我有一个选择下拉菜单，其中可能包含一个大客户的 1000 多个项目。

<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>

我还有一个文本框，当用户输入文本时，我想在下拉列表中移动所选项目。

例如，如果用户键入 82，那么我想移动到存在 82 的框中的第一个项目，即值为 973。如果用户键入 825，则移动到 974，等等。如果用户键入 Fuel ，找到包含该字符串的第一个选项。

我目前使用 jquery 作为我的 javascript 库。

你有什么建议来解决这个问题？我应该切换到自动完成吗？如果是这样，我需要带有箭头的东西来下拉整个列表，因为某些客户可能只有 3 或 4 个可供选择。

谢谢。

【问题讨论】：

标签： javascript jquery jquery-plugins

【解决方案1】：

给定一个包含搜索字符串的变量searchFor，您可以使用此 jquery sn-p 选择包含该文本的第一个选项：

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

所以如果你有一个id为selectSearchBox的文本输入，你可以这样写：

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

【讨论】：

【解决方案2】：

使用jQuery autocomplete plugin 可能是您的最佳选择。您可以在 SO 上查看以前的答案 here（请不要执行 select => 数组转换，请使用数组或服务器端脚本）。

【讨论】：