Pure js imitation Baidu automatic search

First, prepare the search data:

// Ship basic information var boatInfo = [{"Ship Identification No.": "CN20044677878", "Chinese ship name": "Hai 'an host 00238", "English ship name ": "hai an ji 00238", "IMO No.": "--", "First Registration No.": "271204001844", "album No.": "fsf", "nationality ": "China", "": "Nantong", "ship type": "0201 _ dry cargo ship", "sea boat inner ship": "inner ship", "ship length ": "35.0", "completion date": "", "Total tons": "142", "net tons": "79", "total load tons": "240 ", "All": "Hai 'an County No. 1 Shipping Company Limited", "operator": "Hai 'an County No. 1 Shipping Company Limited", "tank": "50", "host power ": "8000" },{ "Ship Identification No.": "aN20044677878", "Chinese ship name": "jianghai server 00238", "English ship name": "jiang hai an ji 22238 ", "IMO No.": "--", "First Registration No.": "271204001844", "album No.": "fdsd", "nationality": "China", "": "Nantong", "ship type": "0201 _ dry cargo ship", "sea boat inner ship": "inner ship", "ship length": "35.0", "date of completion ": "", "Total tons": "142", "net tons": "79", "total load tons": "240", "all ": "Hai 'an County No. 1 Shipping Co., Ltd.", "operator": "Hai 'an County No. 1 Shipping Co., Ltd", "box": "50", "host power": "8000 "}, {"Ship Identification No.": "bN20044677878", "Chinese ship name": "Nanhai safety machinery 00238", "English ship name": "nan hai an ji 22222", "IMO No ": "--", "First Registration No.": "271204001844", "Brand Book No.": "dfsf", "nationality": "China", "": "Nantong ", "Ship Type": "0201 _ dry cargo ship", "sea boat inner ship": "inner river ship", "ship length": "35.0", "date of completion ", "Total tons": "142", "net tons": "79", "total load tons": "240", "all": "Hai 'an County No. 1 Shipping Company Limited ", "operator": "Hai 'an County No. 1 Shipping Co., Ltd.", "location": "50", "host power": "8000" },{ "Ship Identification No ": "dN20044677878", "Chinese name": "Changjiang 00238", "English name": "chang jiang 33333", "IMO No.": "--", "First Registration No ": "271204001844", "Brand Book No.": "fggg", "nationality": "China", "": "Nantong"," ": "0201 _ dry cargo ship", "sea boat": "river boat", "ship length": "35.0", "Build date": "", "Total tons ": "142", "net ton": "79", "total load tons": "240", "all": "Hai 'an County No. 1 Shipping Co., Ltd.", "operator ": "Hai 'an County No. 1 Shipping Company Limited", "location": "50", "host power": "8000" },{ "Ship Identification No.": "eN20044677878 ", "Chinese name": "Haifeng 00238", "English name": "hai feng 00238", "IMO No.": "--", "First Registration No.": "271204001844 ", "Brand Book No.": "jhjg", "nationality": "China", "": "Nantong", "ship type": "0201 _ dry cargo ship ", "": "", "": "35.0", "Build date": "", "Total tons": "142", "net tons ": "79", "total loaded tons": "240", "all": "Hai 'an County No. 1 Shipping Co., Ltd.", "operator": "Hai 'an County No. 1 Shipping Co., Ltd ", "slot": "50", "host power": "8000" },{ "Ship Identification No.": "fN20044677878", "Chinese ship name": "sea bird 00238 ", "English ship name": "hai niao 00238", "IMO No.": "--", "First Registration No.": "271204001844", "album No.": "mmmf ", "nationality": "China", "": "Nantong", "ship type": "0201 _ dry cargo ship", "sea boat inner ship": "river boat ", "Ship length": "35.0", "Build date": "", "Total tons": "142", "net tons": "79", "total load tons ": "240", "all": "Hai 'an County No. 1 Shipping Co., Ltd.", "operator": "Hai 'an County No. 1 Shipping Co., Ltd", "bin": "50 ", "host power": "8000" },{ "Ship Identification No.": "gN20044677878", "Chinese ship name": "Yellow Sea hosts 00238", "English ship name ": "huang hai an ji 00238", "IMO No.": "--", "First Registration No.": "271204001844", "album No.": "mfg", "nationality ": "China", "": "Nantong", "ship type": "0201 _ dry cargo ship", "sea boat inner ship": "inner ship", "ship length ": "35.0", "completion date": "", "Total tons": "142", "net tons": "79", "total load tons": "240 ", "All": "Hai 'an County No. 1 Shipping Company Limited", "operator": "Hai 'an County No. 1 Shipping Company Limited", "tank": "50", "host power ": "8000"}]; var len = boatInfo. length;

Then prepare two style classes:

/* Used to hide the searched data */
. Divhidden {position: absolute; border: 1px solid #3475c7; display: none ;}

/* Used to display the searched data */

. Divshow {position: absolute; z-index: 1000;/* set the cascading sequence of objects */border: 1px solid #3475c7; display: block ;}

The front-end html is as follows:

<Input name = "textfield" type = "text" class = "inputx" id = "txtBoatId"/>

<Div class = "divhidden" id = "divBoatId">

<Select id = "BoatId" size = "6"> </select>

</Div>

Add a js file: txtBoatId. js

$ (Function () {$ ("# txtBoatId "). keyup (myfunction); // Add a keyup event for the text box $ ("# BoatId "). click (function () {// assign the selected value to the text box $ ("# txtBoatId "). val ($ (this ). val ();} document. getElementById ("divBoatId "). setAttribute ("class", "divhidden") ;}); $ (this ). click (function () {var id = $ (this); // var idid of the currently clicked place =$ ("# BoatId "); /// var ididid = $ ("# divBoatId"); // if it is not an electronic div, make the div disappear if (id! = Idid) {document. getElementById ("divBoatId "). setAttribute ("class", "divhidden") ;}}); function myfunction () {// Delete the select node option document. getElementById ("BoatId "). options. length = 0; // obtain the value of the text box var txt = document. getElementById ("txtBoatId "). value; var reg = new RegExp (txt, "gi"); // Regular Expression for (var I = 0; I <len; I ++) {if (reg. test (boatInfo [I]. ship Identification Number) {var op = document. createElement ("option"); op. innerHTML = boatInfo [I]. ship Identification Number; document. getElementById ("BoatId "). appendChild (op) ;}} if (document. getElementById ("BoatId "). childNodes. length> 0) {if (document. getElementById ("BoatId "). childNodes. length> 5) {document. getElementById ("BoatId "). setAttribute ("size", "5");} else {document. getElementById ("BoatId "). setAttribute ("size", document. getElementById ("BoatId "). childNodes. length-1);} document. getElementById ("divBoatId "). setAttribute ("class", "divshow ");}}});

In this way, the function is almost the same. The details are as follows...