Html5 datalist标签详解以及与后台数据的动态匹配

最近项目中涉及到一个小功能，客户在选择供应商时，由于供应商数目较多（大概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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。