准备数据关键字。json:(这里只贴出部分数据)

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

form class=' fl search _ form ' action=' # ' method=' post ' input class=' search _ text ' id=' search key ' type=' search ' placeholder='请输入搜索关键字onkeyup=' search建议(这个)；/input class=' search _ BTN ' type=' submit ' value='搜索//形式！开始智能搜索关键字匹配弹出层- ul类='关键字_列表/ul！-结束-智能搜索关键字匹配弹出层- js:

//当在搜索框输入内容时，根据关键字匹配，显示弹出层函数搜索显示(obj){ var搜索关键字=$(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 ){ if(searchKey！=' '(数据[i].initial.search(reg)！=-1 | |数据[I]。关键词。搜索(注册)！=-1)){ arr。push(' Li onclick=' changeSearchKey(此)；''数据[i].关键字/Li’)；} } $('.关键字_列表')。html(arr).show()；} });} //单击匹配列表中的关键字选项时，将该关键字显示在搜索框中函数changesearchekey(obj){ var value=$(obj).text()；$('#searchKey ').val(值);$('.关键字_列表')。hide()；} 效果图：

以上所述是小编给大家介绍的埃阿斯实现模拟关键字智能匹配搜索效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！