datalist 是我們可以用來簡單製作類似 auto complete 的 UI 的 html 標籤,那如果要使用 jQuery 取得他的值,只要這樣做就好了。

HTML 的部份如下:

<form action="" method="get">
        <label for="fruit">Choose your fruit :</label>
        <input list="fruit" name="fruit" id="fruitInput">
        <datalist id="fruit">
          <option value="Apple">
          <option value="Orange">
          <option value="Banana">
          <option value="Mango">
          <option value="Avacado">
        </datalist>
        <input type="submit">
</form>

 

jQuery 取值的部分:

$("#fruitInput").change(function(){
  console.log($(this).val())
})