Recently, the project involves a small feature. When the customer chooses the supplier, because the number of suppliers is large (about 3,000), it is obviously unrealistic to generate the drop -down box directly.标签datalist来实现输入中文/拼音首字母时，自动进入数据库模糊查询，并返回相应的结果，生成datalist，由于在输入框中的输入内容发生变化时，datalist会自动触发下拉框，所以使用起来比SELECT is more convenient. The front -end code is as follows:
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.jstype=text/javascript> </script> <script src = ../../common/pages/include.js class = Include = text/ja. Vascript> </script> <script src = .././Common/JS/JS/Ajaxjson.js Type = Text/Javascript> </script> <script src = ../common/js/setting.js type = Text/Javascript> </Script> <script SRC = ../Common/JS/PAGING.JS Type = Text/JavaScript> </script> <Script SRC = ../../Warehousemanage /Testyy .js Type = Text/Javascript> </Script> </Head> <body class => <!-<! [ENDIF]-> <DIV Class = Navbar> </DIV> <DIV Class = SIDEBAR-NAV > </div> <div class = content> <div class = header> <h1 ID = adu class = page-title> drop-down box test </h1> </div> <div class = container-fluid> <div classs =row-fluid> <!-- --------------------------多条件查询------------ ------------------------------------------> <div class = Well ID = SearchDemo> <p> Test data (默认均为d00001)：<br> 昆山市大陆配件有限公司ksdlpjyxgs <br> 亿真企业有限公司yzqyyxgs <br> 泰州市安誊轴皮厂（集团厂） tzsatzpc(jtc) </p> </ div> 按供应商名动态匹配（中文或者拼音均可）： <input list=bro id=name oninput=this.value=this.value.replace(/^ +| +$/g,'');search ('Name', 'BRO', 'Name')> <DataList ID = BRO> </DataList> </DIV> </DIV> </Body> <!--------------------------------------- -----------------footer-------------------------- --> <footer class = FOOT> </FOOTER> </html>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); // Prevent the left (inputContent.length == 0 || Inputc subject.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; // Review: MaxLength guarantees only 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 all drop -down options} if (jdata.Length == 0) // No query results {Alert (no qualified results, please return); inputContent.Value =; // Clear the value of the input box in the input box; } 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 subfix = document.createElement (option); subfix.value =; Information about+inputContent.Value+; listObj.appendchild (Suffix ); Return false;}以上所述是小编给大家介绍的Html5新标签datalist实现输入框与后台数据库数据的动态匹配，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。 Thank you very much for your support for the VEVB Wulin website!