如何根据用户在文本框中的输入更改下拉菜单中的选定项目？

我有一个选择下拉菜单，可能包含超过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，那么我想要移动到存在值为973的存在82的框中的第一项。如果用户键入825，则移动到974等。如果用户键入燃料，找到包含该字符串的第一个选项。

我目前使用jQuery作为我的JavaScript库。

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

谢谢。

来源

2009-03-06 Mike Roosa

由于包含搜索字符串的变量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); 
});

来源

2009-03-06 11:59:09 Magnar

使用jQuery autocomplete plugin可能是您的最佳选择。你可以看看以前的回答here（请不要这样做select =>数组转换，使用数组或服务器端脚本）。

来源

2009-03-06 12:05:19 ybo

如何根据用户在文本框中的输入更改下拉菜单中的选定项目？

回答

相关问题