此方法適合在小型功能裡,不想特地引用 Select2 等 Library 時,可以簡單快速的擁有可搜尋下拉選單的效果。

HTML

 1<div class="input-set">
 2  <label for="item-name">作品名稱</label>
 3  <input 
 4         id="item-name"
 5         name="item-name"
 6         type="text"
 7         placeholder="請輸入作品名稱"
 8         autocomplete="off"
 9         list="item-name-options"
10  />
11</div>
12<datalist id="item-name-options">
13  <option value="PLUTO 冥王">PLUTO 冥王</option>
14  <option value="海盜戰記">海盜戰記</option>
15  <option value="排球少年">排球少年</option>
16  <option value="乒乓">乒乓</option>
17  <option value="迷宮飯">迷宮飯</option>
18</datalist>

CodePen Demo

https://codepen.io/corey924/pen/wvZeNOq