建站资讯

本溪h5建网站企业_Html5新标签datalist实现输入框与

作者:admin 发布时间:2020-12-25
Html5新标签datalist实现输入框与后台数据库数据的动态匹配   发布     HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,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 '');search('name','bro','name') 
 datalist id= bro /datalist 
 /div 
 /div 
 /div 
 /body 
 !-- -----------------------footer-------------------------- -- 
 footer >

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; 
} 

以上所述是小编给大家介绍的Html5新标签datalist实现输入框与后台数据库数据的动态匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


HTML5搜索输入框下拉列表代码是一款在搜索框里面输入问题下拉显示更多信息。需要的朋友可以来凡科下载

html5实现输入框字数限制提示抖动效果,效果图为蓝色背景,输入文字时并伴有横条加载效果,当超过限制字符时,输入框抖动效果代码。本段代码可以在各个网页使用,有需要的

本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面跟着小编一起来看下吧

本文给大家介绍如何使用html5为输入框添加语音输入功能,实现方法很简单,需要的朋友参考下本文

这篇文章主要介绍了HTML5输入框下拉菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

收缩