最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

Ajax怎么做出關(guān)鍵字智能匹配搜索

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 19:56:50
文檔

Ajax怎么做出關(guān)鍵字智能匹配搜索

Ajax怎么做出關(guān)鍵字智能匹配搜索:這次給大家?guī)鞟jax怎么做出關(guān)鍵字智能匹配搜索,Ajax做出關(guān)鍵字智能匹配搜索的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。準(zhǔn)備數(shù)據(jù)keyword.json:(這里只貼出部分?jǐn)?shù)據(jù))[ {"id":1,"initial":"ad&q
推薦度:
導(dǎo)讀Ajax怎么做出關(guān)鍵字智能匹配搜索:這次給大家?guī)鞟jax怎么做出關(guān)鍵字智能匹配搜索,Ajax做出關(guān)鍵字智能匹配搜索的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。準(zhǔn)備數(shù)據(jù)keyword.json:(這里只貼出部分?jǐn)?shù)據(jù))[ {"id":1,"initial":"ad&q
這次給大家?guī)鞟jax怎么做出關(guān)鍵字智能匹配搜索,Ajax做出關(guān)鍵字智能匹配搜索的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。

準(zhǔn)備數(shù)據(jù)keyword.json:(這里只貼出部分?jǐn)?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(); 
}

效果圖:

相信看了本文案例你已經(jīng)掌握了方法,更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章!

推薦閱讀:

在Lavarel框架中ajax需要怎么提交表單

Ajax實現(xiàn)加載進度條的步奏詳解

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Ajax怎么做出關(guān)鍵字智能匹配搜索

Ajax怎么做出關(guān)鍵字智能匹配搜索:這次給大家?guī)鞟jax怎么做出關(guān)鍵字智能匹配搜索,Ajax做出關(guān)鍵字智能匹配搜索的注意事項有哪些,下面就是實戰(zhàn)案例,一起來看一下。準(zhǔn)備數(shù)據(jù)keyword.json:(這里只貼出部分?jǐn)?shù)據(jù))[ {"id":1,"initial":"ad&q
推薦度:
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top