介绍 (,
,{“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"},
) & lt; form 类=癴l search_form", action=?”,方法=皃ost"祝辞,
,& lt; input 类=皊earch_text", id=皊earchKey",类型=皊earch",占位符=扒胧淙胨阉鞴丶帧?onkeyup=皊earchSuggest(这);“/祝辞,
,& lt; input 类=皊earch_btn",类型=皊ubmit",价值=https://www.yisu.com/zixun/八阉?/>
//当在搜索框输入内容时,根据关键字匹配,显示弹出层,
function searchSuggest (obj) {,
,var searchKey=$ (obj) .val (),,
,var reg =, new 正则表达式(searchKey,“我),,//忽略大小写匹配搜索框中输入的内容,
$ . ajax({大敌;
类型:“get",大敌;;
,url:“数据/keyword.json",,
,数据类型:“json",,
成功:功能(数据){大敌;;
var 才能arr=[];,
,,(var 我=0,len=data.length; i“),,
,,},
,,},,,,,
美元才能(“.keywords_list") . html (arr),告诉(),,
}大敌;
,});
},//单击匹配列表中的关键字选项时,将该关键字显示在搜索框中,
function changeSearchKey (obj) {,
美元,var 价值=https://www.yisu.com/zixun/(obj)。text ();
$ (" # searchKey ") .val(价值);
$ (' .keywords_list ') hide ();
} 什么是Ajax
小编给大家分享一下Ajax如何实现模拟关键字智能匹配搜索效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
准备数据关键字。json:(这里只贴出部分数据)
html结构
js:
效果图:
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
以上是“Ajax如何实现模拟关键字智能匹配搜索效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
