最近項目中涉及到一個小功能，客戶在選擇供應商時，由于供應商數目較多（大概3000個左右），因此直接生成下拉框顯然不現實，所以就更換解決方案，打算借助HTML5新增的標簽datalist來實現輸入中文/拼音首字母時，自動進入數據庫模糊查詢，并返回相應的結果，生成datalist，由于在輸入框中的輸入內容發生變化時，datalist會自動觸發下拉框，所以使用起來比select更便捷。前端部分代碼如下：

Html Code：

 !DOCTYPE html  html lang= en  head id= head  title 庫存下拉框測試 /title  meta charset= utf-8  meta content= IE=edge,chrome=1 http-equiv= X-UA-Compatible  meta name= viewport content= width=device-width, initial-scale=1.0  meta name= description content=  meta name= author content=  script src= ../../Common/content/jquery-1.7.2.min.js type= text/javascript /script  script src= ../../Common/pages/include.js >
JavaScript Code：
var listobj=null; //datalist對象 var requestItem=null; //后臺返回的json數據中所需的key值 var inputContent=null; //input標簽對象 /**search（）說明：  * inputID： input標簽的ID  * datalistID： datalist標簽的ID  * itemName： 后臺返回的json數據中所需的key值（僅需表格中中文字段的屬性名）  * */ function search(inputID,datalistID,itemName)  inputContent=document.getElementById(inputID);  var datalist=document.getElementById(datalistID);  //防止在無輸入內容的情況下產生遺留下拉選項  if(inputContent.value.length==0||inputContent.value== )  var sub=datalist.childNodes;  if(sub.length 0)  for (var i =sub.length-1; i i--)  datalist.removeChild(sub[i]);  listobj=null;  requestItem=null;  inputContent.value=null;  return false;  //全局變量賦值  listobj=datalist;  requestItem=itemName;  var data=  var url=  if(/^[a-zA-Z]*$/.test(inputContent.value))  //檢測出是拼音首字母  data= type=searchWords?m= +inputContent.value; //注意：data-----------需要自定義  url=baseurl + /servlet/ListDemo //注意：url-----------需要自定義  sendRequest( post ,url,data,getResult);  else if (/^[/u4e00-/u9fa5]*$/.test(inputContent.value))  //檢測出是中文  data= type=searchChinese?m= +inputContent.value; //注意：data-----------需要自定義  url=baseurl + /servlet/ListDemo //注意：url-----------需要自定義  sendRequest( post ,url,data,getResult); //填寫倉庫下拉框 function getResult(result)  var data=result;  var JData=eval( ( + data + )  var maxlength=10; //注釋：maxlength保證過多查詢結果下只顯示10條  if(JData.length =10)  maxlength=JData.length;  var sub=listobj.childNodes;  for (var i =sub.length-1; i i--)  listobj.removeChild(sub[i]); //清空datalist所有的下拉選項  if(JData.length==0) //沒有查詢結果  alert( 沒有符合條件的結果，請重輸  inputContent.value= //清空input輸入框的值  return false;  for (var i=0;i maxlength;i++)  var obj=document.createElement( option  var indexobj=JData[i];  if(/^[a-zA-Z]*$/.test(inputContent.value))  obj.value=indexobj[requestItem];  obj.innerHTML=inputContent.value;  if (/^[/u4e00-/u9fa5]*$/.test(inputContent.value))  obj.value=indexobj[requestItem];  listobj.appendChild(obj);  var suffix=document.createElement( option  suffix.value=  suffix.innerHTML= 輸入更多有關 +inputContent.value+ 的信息  listobj.appendChild(suffix);  return false; }
【相關推薦】
1. HTML免費視頻教程
2. 分享一個超全面的HTML、CSS知識點總結
3. 教你怎么在nodejs下解析html
4. html實現消息按鈕上的數量角標的實例詳解
5. html中怎么樣才能讓JSON數據顯示的方法介紹
以上就是Html5 datalist標簽詳解以及與后臺數據的動態匹配的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。