Ajax intelligently matches search results with simulated keywords and ajax keywords

Ajax intelligently matches search results with simulated keywords and ajax keywords

Prepare the data keyword. json :( only part of the data is pasted here)

[{"Id": 1, "initial": "ad", "keyword": "Audi" },{ "id": 2, "initial": "ada4l ", "keyword": "Audi A4L" },{ "id": 3, "initial": "ada6l", "keyword": "Audi A6L" },{ "id ": 4, "initial": "adq5", "keyword": "Audi Q5" },{ "id": 5, "initial": "ada3", "keyword ": "Audi A3" },{ "id": 6, "initial": "adq7", "keyword": "Audi Q7 (imported)" },{ "id ": 7, "initial": "ada8", "keyword": "Audi A8L (import)" },{ "id": 8, "initial": "bm ", "keyword": "BMW" },{ "id": 9, "initial": "bm5x", "keyword": "BMW 5 Series" },{ "id ": 10, "initial": "bm7x", "keyword": "BMW 7 Series" },{ "id": 11, "initial": "bt", "keyword ": "Honda" },{ "id": 12, "initial": "bqsbx25", "keyword": "Beiqi Qibao X25" },{ "id": 13, "initial": "bqsbx35", "keyword": "Bei Qi Qibao X35" },{ "id": 14, "initial": "bqsbx55", "keyword ": "Beiqi Qibao X55"}]

Html Structure

<Form class = "fl search_form" action = "#" method = "post"> <input class = "search_text" id = "searchKey" type = "search" placeholder = "please enter the search keyword "onkeyup =" searchSuggest (this ); "/> <input class =" search_btn "type =" submit "value =" Search "/> </form> <! -- Start -- smart search keyword match pop-up layer --> <ul class = "keywords_list"> </ul> <! -- End -- pop-up layer of Intelligent Search Keyword matching -->

Js:

// When the content is entered in the search box, the pop-up function searchSuggest (obj) {var searchKey = $ (obj) is displayed based on the keyword match ). val (); var reg = new RegExp (searchKey, "I"); // ignore the content entered in the case-insensitive match search box $. ajax ({type: "get", url: "data/keyword. json ", dataType:" json ", success: function (data) {var arr = []; for (var I = 0, len = data. length; I <len; I ++) {if (searchKey! = "" & (Data [I]. initial. search (reg )! =-1 | data [I]. keyword. search (reg )! =-1) {arr. push ("<li onclick = 'changesearchkey (this); '>" + data [I]. keyword + "</li>") ;}$ (". keywords_list "pai.html (arr ). show () ;}}) ;}// when you click the keyword option in the matching list, the keyword is displayed in the search box function changeSearchKey (obj) {var value = $ (obj ). text (); $ ("# searchKey "). val (value); $ ('. keywords_list '). hide ();}

:

The above section describes how to use Ajax to intelligently match search results with simulated keywords. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!