小編給大家分享一下Ajax如何實現(xiàn)模擬關(guān)鍵字智能匹配搜索效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
公司專注于為企業(yè)提供網(wǎng)站設(shè)計、網(wǎng)站制作、微信公眾號開發(fā)、成都商城網(wǎng)站開發(fā),微信小程序開發(fā),軟件按需策劃設(shè)計等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗,我們會仔細了解各客戶的需求而做出多方面的分析、設(shè)計、整合,為客戶設(shè)計出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案,創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。準(zhǔn)備數(shù)據(jù)keyword.json:(這里只貼出部分數(shù)據(jù))
[ {"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"} ]
html結(jié)構(gòu)
<form class="fl search_form" action="#" method="post"> <input class="search_text" id="searchKey" type="search" placeholder="請輸入搜索關(guān)鍵字" onkeyup="searchSuggest(this);"/> <input class="search_btn" type="submit" value="搜索"/> </form> <!--start--智能搜索關(guān)鍵字匹配彈出層--> <ul class="keywords_list"></ul> <!--end--智能搜索關(guān)鍵字匹配彈出層-->
js:
//當(dāng)在搜索框輸入內(nèi)容時,根據(jù)關(guān)鍵字匹配,顯示彈出層 function searchSuggest(obj){ var searchKey=$(obj).val(); var reg = new RegExp(searchKey,"i"); //忽略大小寫匹配搜索框中輸入的內(nè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='changeSearchKey(this);'>"+data[i].keyword+"</li>"); } } $(".keywords_list").html(arr).show(); } }); } //單擊匹配列表中的關(guān)鍵字選項時,將該關(guān)鍵字顯示在搜索框中 function changeSearchKey(obj){ var value=$(obj).text(); $("#searchKey").val(value); $('.keywords_list').hide(); }
效果圖:
ajax是一種在無需重新加載整個網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù),可以通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,使網(wǎng)頁實現(xiàn)異步更新。
以上是“Ajax如何實現(xiàn)模擬關(guān)鍵字智能匹配搜索效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁名稱:Ajax如何實現(xiàn)模擬關(guān)鍵字智能匹配搜索效果-創(chuàng)新互聯(lián)
當(dāng)前URL:http://www.muchs.cn/article40/djjpho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、軟件開發(fā)、關(guān)鍵詞優(yōu)化、域名注冊、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容