javascript - 如何根据用户在文本框中输入的内容更改下拉列表中的选定项目？

Question

我有一个选择下拉列表，可能包含一个大客户的 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 个可供选择。

谢谢。

Answer 1

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

$("#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);
});