The tutorial of Ajax to realize the search effect of simulation keyword intelligence matching

Prepare data Keyword.json: (only part of the data is posted 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 (Import)"}, {"id": 7, "initial": "Ada8", "keyword": "Audi a8l (Import)"}, {"id": 8, "initial": "BM", "keyword": "BMW"}, {"id": 9, "initial": "bm5x", "keyword": "BMW 5 Series"}, {"id": "initial": "bm7x", "keyword": "BMW 7 Series"}, {"id": one, "initial": "BT", "keyword": "Honda"}, {"id": "initial": "bqsbx25", "keyword": "Beijing Auto Gentry Treasure X25"}, {"id": "initial": "bqsbx35", "keyword": "Beijing Auto Gentry Treasure X35"}, {"id": "initial": "bqsbx55", "keyword": "Beijing Auto Gentry Treasure X55"} ]

HTML structure

<form class= "fl search_form" action= "#" method= "POST" > <input class= "Search_text" id= "Searchkey" "type=" search "placeholder=" Please enter the keyword "onkeyup=" searchsuggest (this); " /> <input class= "search_btn" type= "submit" value= "Search"/> </form> <!--start--Smart search keyword matching pop-up layer--> <ul class= "Keywords_list" ></ul> <!--end--Smart search keyword matching pop-up layer-->

Js:

When you enter content in the search box, the pop-up layer is displayed according to the keyword Functionsearchsuggest (obj) { varsearchkey=$ (obj). val (); Varreg =newregexp (Searchkey, "I");//ignore case to match input in the search box $.ajax ({ Type: "Get", URL: "Data/keyword.json", DataType: "JSON", Success:function (data) { Vararr=[]; for (vari=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"). HTML (arr). Show (); } }); } When you click the keyword option in the matching list, the keyword is displayed in the search box Functionchangesearchkey (obj) { varvalue=$ (obj). text (); $ ("#searchKey"). val (value); $ ('. Keywords_list '). Hide (); }

Effect Chart: