Comment effectuer une recherche intelligente de correspondance de mots clés avec Ajax

Cette fois, je vais vous montrer comment effectuer une correspondance intelligente de mots-clés avec Ajaxrecherche, et quelles sont les précautions pour effectuer une correspondance intelligente de mots-clés avec Ajax. cas pratique. Jetons un coup d’oeil.

Préparer les données mot-clé.json : (seule une partie des données est publiée ici)

[ 
 {"id":1,"initial":"ad","keyword":"奥迪"}, 
 {"id":2,"initial":"ada4l","keyword":"奥迪A4L"}, 
 {"id":3,"initial":"ada6l","keyword":"奥迪A6L"}, 
 {"id":4,"initial":"adq5","keyword":"奥迪Q5"}, 
 {"id":5,"initial":"ada3","keyword":"奥迪A3"}, 
 {"id":6,"initial":"adq7","keyword":"奥迪Q7(进口)"}, 
 {"id":7,"initial":"ada8","keyword":"奥迪A8L(进口)"}, 
 {"id":8,"initial":"bm","keyword":"宝马"}, 
 {"id":9,"initial":"bm5x","keyword":"宝马5系"}, 
 {"id":10,"initial":"bm7x","keyword":"宝马7系"}, 
 {"id":11,"initial":"bt","keyword":"本田"}, 
 {"id":12,"initial":"bqsbx25","keyword":"北汽绅宝 X25"}, 
 {"id":13,"initial":"bqsbx35","keyword":"北汽绅宝X35"}, 
 {"id":14,"initial":"bqsbx55","keyword":"北汽绅宝X55"} 
]

structure html

<form class="fl search_form" action="#" method="post"> 
 <input class="search_text" id="searchKey" type="search" placeholder="请输入搜索关键字" onkeyup="searchSuggest(this);"/> 
 <input class="search_btn" type="submit" value="搜索"/> 
</form> 
<!--start--智能搜索关键字匹配弹出层--> 
<ul class="keywords_list"></ul> 
<!--end--智能搜索关键字匹配弹出层-->

js :

//当在搜索框输入内容时，根据关键字匹配，显示弹出层 
function searchSuggest(obj){ 
 var searchKey=$(obj).val(); 
 var reg = new RegExp(searchKey,"i"); //忽略大小写匹配搜索框中输入的内容 
 $.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=&#39;changeSearchKey(this);&#39;>"+data[i].keyword+"</li>"); 
  } 
  }     
  $(".keywords_list").html(arr).show(); 
 } 
 }); 
} 
//单击匹配列表中的关键字选项时，将该关键字显示在搜索框中 
function changeSearchKey(obj){ 
 var value=$(obj).text(); 
 $("#searchKey").val(value); 
 $('.keywords_list').hide(); 
}

Rendu :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Comment soumettre un formulaire avec ajax dans le framework Lavarel

Étapes Ajax pour implémenter la barre de progression de chargement Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!