如何根據文本框中的用戶輸入更改下拉列表中的選定項目？

Question

我有一個 select 下拉列表，它可能包含一個大客戶的 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 到 select 來自。

謝謝。

Answer 1

給定一個包含搜索字符串的變量searchFor ，您可以 select 使用此 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);
});

Answer 2

使用jQuery 自動完成插件可能是您的最佳選擇。 您可以在 SO 上查看以前的答案（請不要這樣做 select => 數組轉換，使用數組或服務器端腳本）。