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就是個坑啊!!