html5 中新的datalist 自動下拉提示輸入框
阿新 • • 發佈：2019-02-08
在日常的頁面製作中，為了方便使用者輸入，經常可以在一個輸入文字框中，當用戶輸入
內容時，自動下拉提示建議使用者的輸入，這叫autocomplete或者autosuggestion功能，
這樣能加快使用者的輸入，目前的做法是通過ajax去實現，比如通過DWR等，這方面
的資料很多的。
而HTML5中，新增加了datalist這個標籤，其實也是可以滿足在前端達到
同樣的功能，例子如下：
這樣的程式碼執行後，當用戶在文字輸入框輸入內容時，就會下拉提示三種水果，
當點選某個按鈕或提交的時候，得到data-xyz的值
內容時，自動下拉提示建議使用者的輸入，這叫autocomplete或者autosuggestion功能，
這樣能加快使用者的輸入，目前的做法是通過ajax去實現，比如通過DWR等，這方面
的資料很多的。
而HTML5中，新增加了datalist這個標籤，其實也是可以滿足在前端達到
同樣的功能，例子如下：
<input type="text" value="" list="fruits" /> <datalist id="fruits"> <option value="Apple"></option> <option value="Orange"></option> <option value="Peach"></option> </datalist>
這樣的程式碼執行後，當用戶在文字輸入框輸入內容時，就會下拉提示三種水果，
建議使用者輸入，如果擔心瀏覽器相容問題，可以嘗試用如下程式碼：
<datalist id="fruits"> Pick your favorite fruit <select name="fruit_sel"> <option value="Apple">Apple</option> <option value="Orange">Orange</option> <option value="Peach">Peach</option> </select> or type one. </datalist> <input type="text" name="fruit" value="" list="fruits" />
但這個情況下，記得服務端要同時捕捉fruits和fruit_sel兩個引數了datalist在firefox版本下一直都有的，這個讚揚一個，而其他版本瀏覽器
得到值，困為在不同的瀏覽器上，會有不同的表現，尤其是datalist。所以，我會這樣寫：
<input list="items" id="item"> <datalist id="items"> <option value="A item" data-xyz = "1" > <option value="aa item" data-xyz = "2" > <option value="C item" data-xyz = "3" > <option value="D item" data-xyz = "4" > <option value="E item" data-xyz = "5" > </datalist> <input type="button" id="button" value="Get xyz" />
當點選某個按鈕或提交的時候，得到data-xyz的值
$("#button").click(function() {
var val = $('#item').val()
var xyz = $('#items option').filter(function() {
return this.value == val;
}).data('xyz');
/* if value doesn't match an option, xyz will be undefined*/
var msg = xyz ? 'xyz=' + xyz : 'No Match';
alert(msg)
})但它不支援不同的ID，相同的Name的情況，比如如下情況：
<input type="text" value="" list="department" />
<datalist id="department">
<option data-id="1" value="arthur"></option>
<option data-id="2" value="arthur"></option>
<option data-id="3" value="king"></option>
</datalist>而且，chrome不支援中文搜尋，firefox倒是支援。唉... datalist就是個坑啊！！