JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<h1><pre>&lt;select&gt; vs &lt;Datalist&gt;</pre></h1>
<div style="background-color:yellow;padding:1em;">
  <p>傳統的HTML下拉選單&lt;select&gt;</p>
  <label for="tvlist1">請選擇電視台:</label>
  <select name="tvlist1" id="tvlist1">
    <option value="6">民視</option>
    <option value="8">台視</option>
    <option value="10">中視</option>
    <option value="12">華視</option>    
  </select>
</div>
<div style="background-color:lightblue;padding:1em;">
  <p>新式的下拉選單&lt;Datalist&gt;，結合關鍵字搜尋+下拉選單</p>
  <label for="tvlist2">請選擇電視台:</label><input list="tvDatalist" name="tvList2" id="tvList2">
  <datalist id="tvDatalist">
    <option data-value="6">民視</option>
    <option data-value="8">台視</option>
    <option data-value="10">中視</option>
    <option data-value="12">華視</option>    
  </datalist>
</div>















































































































<p>[email protected]</p>

</body>
</html>

CSS

body{font-family: "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif, serif;}
div{display:inline-block;}