This time I will bring you the dynamic matching of the datalist input box and the background database data.What are the things to note?The following is a practical case, let's take a look. one time.

A recent project involves a small function. When a customer chooses a supplier, due to the large number of suppliers (about 3,000), it is obviously unrealistic to directly generate a drop-down box, so the solution is changed. We plan to use the new tag datalist in HTML5 to automatically enter the database fuzzy query when entering the first letter of Chinese/Pinyin, and return the corresponding results to generate a datalist. When the input content in the input box changes, the datalist will automatically trigger the drop-down. box, so it is more convenient to use than select. The front-end code is as follows:

Html Code:

库存下拉框测试

下拉框测试

测试数据(默认均为d00001)：
昆山市大陆配件有限公司 ksdlpjyxgs
亿真企业有限公司 yzqyyxgs
泰州市安誊轴皮厂（集团厂） tzsatzpc(jtc)

按供应商名动态匹配（中文或者拼音均可）：

Copy after login

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>=0 ; 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>=0 ; i--) { listobj.removeChild(sub[i]); //清空datalist所有的下拉选项 } if(JData.length==0) //没有查询结果 { alert("没有符合条件的结果，请重输"); inputContent.value=""; //清空input输入框的值 return false; } for (var i=0;i
        
         Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!