使用 jQuery 代替長期列出的 < SELECT > 框？

Question

現在我有一個應用程序，允許用戶從下拉（選擇）框中選擇一個戒指。 可以有很多選擇，它會創建一個很長的下拉菜單，使用起來不太好。 我想也許使用 jQuery 讓它變得更好一點。 就像可能在頂部有一個標簽，他們可以選擇“白金”、“黃金”等來縮小我不確定的選項。 我從未使用過 jQuery 並且不確定它在這里能為我做什么，所以我願意接受任何建議。 我只有一個要求，現在每個<選項>都有一個值屬性表示所選項目的庫存號，所以當點擊提交按鈕時，我的處理頁面會收到他們想要的項目的庫存號； 我需要保留該功能。

誰能告訴我一個很酷的解決方案？

謝謝！

Answer 1

嗯，像FlexBox 之類的東西？

Answer 2

您可能想查看 jQuery自動完成插件。 您可以限制自動完成的輸入，以便必須從您的自動完成列表中選擇它。 如果將所需的字符數設置為 0，它可能會在文本框獲得焦點時調出整個列表，然后在用戶開始輸入時縮小范圍。

Answer 3

您查看過jQuery UI 演示了嗎？ 您可能對“可選”交互以及“選項卡”小部件感興趣。