HTML datalist 選項列表

admin發表於2018-11-05
HTML

<datalist>標籤通常與<input>標籤配合使用，HTML5新增。

大家知道所有新功能的出現都是由需求推動的，各行各業都是如此。

首先介紹一下<datalist>出現的現實需求。

特別說明：下面僅以input 文字框為例子，其實它還可以用於其他控制元件。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform">
  <select name="sel">
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

上面是一個簡單的select下拉選單，執行截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/111704xtsle36juz73su6h.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

select下拉選單可以預定義幾個選擇項。

能夠在有限的空間內給使用者提供多種選擇機會。

但是它也有一個問題，那就是不夠靈活，選擇項是固定的，有限的選擇項難以涵蓋使用者的所有需求。

尤其是網站無法預估使用者所有需求，所以需要一個更加靈活的解決方案。

<datalist>標籤能夠很好的滿足此需求，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
</head> 
<body>
<form action="do.php" name="myform">
  <input type="text" name="txt" list="softwhy">
  <datalist id="softwhy">
    <option value="螞蟻部落" />
    <option value="css教程" />
    <option value="div教程" />
    <option value="softwhy.com" />
  </datalist>
</form>
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/111738zugzgeag4a7yz6lz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.將input元素的list屬性值設定為datalist的id屬性值，即可將兩者關聯起來。

（2）.datalist可以預定義input元素的可能的value值。

（3）.那麼文字框不但具有了select預定義效果，也可以自己輸入，功能更加強大。

特別說明：兩者關聯後，可以具有篩選功能，截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/111804qx45xcqt4m9tqc4q.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

在文字框輸入"教程"後，下拉選單會被篩選出具有"教程"兩個關鍵字的選項。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
</head> 
<body>
<form action="do.php" name="myform">
  <input type="text" name="txt" list="softwhy">
  <datalist id="softwhy">
    <option label="anzone" value="螞蟻部落" />
    <option label="css" value="css教程" />
    <option label="div" value="div教程" />
    <option label="url" value="softwhy.com" />
  </datalist>
</form>
</body> 
</html>

可以給<option>項新增label標籤，用於對選項的值進行說明。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/05/111841j022sql0l224gls4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

label屬性規定的值顯示在value值的後面，用於對其加以說明。

相關文章