《圖解HTML練習》- 實現下拉選擇不是隻有select

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的位置
  • 不能控制每次當用戶輸入多少個字符後,就出現下拉建議列表
  • 不能控制大小寫敏感,或當匹配什麼樣的字符就出現下拉建議列表
  • 不能將其與服務端的數據源綁定
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章