如何在文本框上添加帶有搜索的下拉列表視圖？

Question

我試圖在我的頁面上實現這種類型的下拉菜單。任何幫助將不勝感激。

Answer 1

您可以使用<datalist>元素來利用HTML5的本機下拉菜單實現。

工作實例：

<input list="adventure" name="myAdventure" placeholder="Start your search by typing 'Location' or 'Activity'" size="45"> 
 

 
<datalist id="adventure"> 
 
    <option value="Location - Azad Kashmir"> 
 
    <option value="Location - Balochistan"> 
 
    <option value="Location - Chitral/Kalash"> 
 
    <option value="Location - Fairy Meadows"> 
 
    <option value="Location - Hunza/Gilgit"> 
 
    <option value="Location - Islamabad"> 
 

 
    <option value="Activity - Beach"> 
 
    <option value="Activity - Cliff Diving"> 
 
    <option value="Activity - Cultural Tour"> 
 
    <option value="Activity - Desert Safari"> 
 
    <option value="Activity - Moutaineering"> 
 
    <option value="Activity - Paragliding"> 
 
</datalist>

Answer 2

你可以使用一個jQuery插件，如jQuery UI's Autocomplete component。

使用戶能夠快速查找並從預先填充的值列表中進行選擇，並利用搜索和過濾功能進行輸入。