Shulou(Shulou.com)06/03 Report--

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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.