AJAX implementation of simulation keyword Intelligent matching search effect Example tutorial

This article mainly introduced the AJAX implementation simulation keyword Intelligent Matching search effect, when the search box input content, according to keyword matching, display pop-up layer, very good, with reference value, the need for friends can refer to, hope to help everyone.

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 ": Ten," initial ":" bm7x "," keyword ":" BMW 7 Series "},  {" id ": one," initial ":" BT "," keyword ":" Honda "},  {" ID ":" initial ":" bqsbx25 "," keyword ":" Baic X25 "}, {" id ": initial", "bqsbx35": "  baic shen Bao keyword"},  {"id": "initial": "bqsbx55", "keyword": "Baic shen Bao 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 match popup layer-- <ul class= "Keywords_list" ></ul> <!--end--Smart search keyword match popup layer--

Js:

When you enter content in the search box, the popup layer function searchsuggest (obj) {var searchkey=$ (obj) is displayed according to the keyword match  . val ();  var reg = new RegExp (Searchkey, "I"); Ignores the case that matches what is entered in the 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"). HTML (arr). Show ();  }  ); ///Click the keyword option in the match list to display that keyword in the search box, function Changesearchkey (obj) {  var value=$ (obj). text ();  $ ("#searchKey"). val (value);  $ ('. Keywords_list '). Hide (); }

：

Related recommendations:

The search keyword highlighting method for JavaScript replace

The Super keyword in ES6 Class

JQ, Ajax, PHP, MySQL implementation of keyword fuzzy query