datalist標籤
定義和用法
<datalist> 標籤定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。
datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表。
請使用 input 元素的 list 屬性來綁定 datalist。
示例
datalist標籤,這個標籤製作的下拉可省了不少事呢……此處注意input裏的list=“li”與datalist裏的id=“li”。
貼上一段簡短的代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
請輸入姓名:<input type="text" list="li"/>
<datalist id="li">
<option>
張三
</option>
<option>
李四
</option>
<option>
王五
</option>
</datalist>
</body>
</html>
Datalist的限制
當然,Datalist也有限制和不足之處,體現在:
- 不能使用CSS去隨意控制或改變其下拉建議列表中的項
- 不能控制datalist的位置
- 不能控制每次當用戶輸入多少個字符後,就出現下拉建議列表
- 不能控制大小寫敏感,或當匹配什麼樣的字符就出現下拉建議列表
- 不能將其與服務端的數據源綁定