The new Html5 tag datalist dynamically matches the input box with the background database data. html5datalist

The new Html5 tag datalist dynamically matches the input box with the background database data. html5datalist

A small feature is involved in the recent project. When the customer selects a supplier, it is obviously unrealistic to generate a drop-down box directly because of the large number of suppliers (about 3000), so the solution should be replaced, when you use the datalist tag added to HTML5 to input the first letter of Chinese or pinyin, the system automatically enters the database for fuzzy query and returns the corresponding results to generate a datalist, when the input content in the input box changes, datalist will automatically trigger the drop-down box, making it easier to use than select. The front-end code is as follows:

Html Code:

<! DOCTYPE html> 
JavaScript Code:
Var listobj = null; // The datalist object var requestItem = null; // the key value var inputContent = null in the json data returned by the background; // input tag object/** search () Description: * inputID: ID of the input tag * datalistID: ID of the datalist tag * itemName: the key value in the json data returned by the background (only the attribute name of the Chinese field in the table is required) **/function search (inputID, datalistID, itemName) {inputContent = document. getElementById (inputID); var datalist = document. getElementById (datalistID); // prevents legacy drop-down options 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;} // The global variable value is listobj = datalist; requestItem = itemName; var data = ""; var url = ""; if (/^ [a-zA-Z] * $ /. test (inputContent. value) {// The first letter of the Chinese alphabet data = "type = searchWords into m =" + inputContent. value; // Note: data ----------- requires custom url = baseurl + "/servlet/ListDemo"; // Note: url ----------- requires custom sendRequest ("post", url, data, getResult);} else if (/^ [\ u4e00-\ u9fa5] * $ /. test (inputContent. value) {// Chinese data = "type = searchChinese character m =" + inputContent. value; // Note: data ----------- requires custom url = baseurl + "/servlet/ListDemo"; // Note: url ----------- requires custom sendRequest ("post", url, data, getResult) ;}/// enter the function getResult (result) {var data = result; var JData = eval ("(" + data + ")" in the warehouse drop-down box ")"); var maxlength = 10; // Note: maxlength ensures that 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]); // clear all the drop-down options of datalist} if (JData. length = 0) // No query results {alert ("no matching results, Please re-enter"); inputContent. value = ""; // clear the value of the input box 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 = "enter more information" + inputContent. value + "information"; listobj. appendChild (suffix); return false ;}
The above is the Html5 new tag datalist introduced by xiaobian to achieve dynamic matching between the input box and the background database data. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!