如何將輸入放在選擇標簽的頂部以進行搜索？

Question

我正在嘗試制作高級的<select>標記，但是在第一個<option>屬性進行搜索之前實現了輸入。 像這樣：

這是我的代碼。 如何在代碼中添加<input name="search_category" class="search" /> ？

 select { width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select size="1" class="selection"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </select> 

注意：我使用jQuery。

Answer 1

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

如果我理解正確的問題，這應該可以解決。

Answer 2

你嘗試過jQuery select2嗎？

https://select2.github.io/

我認為它將輕松解決您的問題:)

Answer 3

不是Jquery，但是您可以使用數據列表

 <style> input { font-size:1.5em; } </style> <input type="text" placeholder="Select" name="cat" list="cat"> <datalist id="cat"> <option>Social</option> <option>Political</option> <option>Cultural</option> <option>Athletic</option> <option>Other</option> </datalist> 

注意：在chrome中，您將獲得選擇圖標，但可能不是mozilla

Answer 4

您可以使用select2 jquery插件方法來實現具有搜索功能的下拉菜單。

這里有例子的鏈接 。

希望這對您有所幫助。

Answer 5

我使用名為Chosen的插件取得了很好的經驗： https : //harvesthq.github.io/chosen/

或Select2 ： https ： //select2.github.io/

如果jQuery依賴關系還可以...