Example Analysis of dynamic matching between datalist input Box and background Database data

This article mainly introduces the example analysis of dynamic matching between datalist input box and background database data, which is very detailed and has a certain reference value. Interested friends must read it!

Recently, a small function is involved in the project. When customers choose suppliers, because there are a large number of suppliers (about 3000), it is obviously not realistic to generate drop-down boxes directly, so they change the solution and intend to use HTML5's new tag datalist to automatically enter the database fuzzy query when entering Chinese / Pinyin initials, and return corresponding results to generate datalist. Because datalist automatically triggers the drop-down box when the input content in the input box changes, it is easier to use than select. The front-end code is as follows:

Html Code:

Inventory drop-down box test

Drop-down box test

Test data (the default is d00001):

Kunshan Continental Accessories Co., Ltd. Ksdlpjyxgs

Yzqyyxgs of Yizhen Enterprise Co., Ltd.

Taizhou Anyanzhan Leather Factory (Group Factory) tzsatzpc (jtc)

Dynamic matching by supplier name (either in Chinese or Pinyin):

JavaScript Code:

The required key value var inputContent=null in the json data returned by the var listobj=null; / / datalist object var requestItem=null; / / / / input tag object / * * search () description: * inputID: ID * datalistID of the input tag: ID * itemName of the datalist tag: the key value required in the json data returned by the backend (only the attribute names of the Chinese fields in the table) * * / function search (inputID,datalistID,itemName) {inputContent=document.getElementById (inputID); var datalist=document.getElementById (datalistID) / / prevent the legacy drop-down option if (inputContent.value.length==0 | | inputContent.value== "") {var sub=datalist.childNodes; if (sub.length > 0) {for (var I = sub.length-1; I > = 0; iMui -) {datalist.removeChild (sub [I]) without input }} listobj=null; requestItem=null; inputContent.value=null; return false;} / / Global variable assignment listobj=datalist; requestItem=itemName; var data= ""; var url= "" If (/ ^ [a-zA-Z] * $/ .test (inputContent.value)) {/ / detected to be the initials data= "type=searchWords" m = "+ inputContent.value; / / Note: data- requires custom url=baseurl +" / servlet/ListDemo " / / Note: url- needs custom sendRequest ("post", url,data,getResult);} else if (/ ^ [\ u4e00 -\ u9fa5] * $/ .test (inputContent.value)) {/ / detected to be Chinese data= "type=searchChinese" + inputContent.value / / Note: data- needs custom url=baseurl + "/ servlet/ListDemo"; / / Note: url- needs custom sendRequest ("post", url,data,getResult);}} / / enter the warehouse drop-down box function getResult (result) {var data=result Var JData=eval ("(" + data + ")"); var maxlength=10; / / Note: maxlength guarantees that only 10 if (JData.length=0; iMel -) {listobj.removeChild (sub [I]) will be displayed under too many query results. / / clear all datalist drop-down options} if (JData.length==0) / / No query results {alert ("No qualified results, please re-enter"); inputContent.value= ""; / / clear the value of the input input box return false;} for (var item0 / I