詳解jQuery如何實(shí)現(xiàn)模糊搜索
如何實(shí)現(xiàn) 模糊搜索 當(dāng)我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候,通常能看到搜索欄,這大大的提高了我們獲取數(shù)據(jù)的目的性。
那如何去實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模糊搜索 框呢,以下案例獲取能給你一點(diǎn)思路。
以下案例,可以實(shí)現(xiàn)當(dāng)按鍵按下時(shí),自動(dòng)檢索匹配數(shù)據(jù)
基本css 樣式
.row { height: 80px; */\* line-height: 80px; \*/* text-align: left; line-height: 80px; padding-top: 5px; margin-bottom: 10px; } .inh { width: 70px; height: 70px; border: 1px solid blanchedalmond; border-radius: 5px; line-height: 70px; text-align: center; margin-right: 30px; } img { width: 100%; height: 100%; }
基本的html 樣式
<div class="search_box"><i class="fa fa-arrow-left ftop"></i> <form action="#"> <input type="text" id="index-to" placeholder="請(qǐng)輸入搜索內(nèi)容" autofocus onfocus="autoPlays"> <i class="fa fa-times fa=1gt rege"></i> </form> </div> <div class="search_content search_default"> <ul id="view-to"></ul> </div> </div>
初始樣式圖如下:
/** * 自己創(chuàng)建一個(gè)商品數(shù)據(jù)集合 * 點(diǎn)擊分類時(shí)實(shí)現(xiàn)商品的切換 * 切換之后已經(jīng)選擇好的數(shù)量需要記錄 */ var arrAllProducts = [ { type: "炒菜", products: [ { id: 10001, name: "土豬肉燒紅薯", img: "http://recipe1.hoto.cn/pic/recipe/l/ff/4f/1134591_e480ee.jpg", price: 26.00, desc: "紅薯與肉香交互輝映,肥而不膩、酥而不碎、甜而不粘、濃而不咸。" }, { id: 10002, name: "紅燒蝦園子", img: "http://recipe1.hoto.cn/pic/recipe/l/c3/66/1140419_19dbfb.jpg", price: 28.00, desc: "傳統(tǒng)的《桂花酒釀圓子》有現(xiàn)成的賣(mài),自己做也是簡(jiǎn)單方便口味很不錯(cuò)" }, { id: 10003, name: "宮保雞丁", img: "http://recipe0.hoto.cn/pic/recipe/g_148/6a/da/252522_0d88b3.jpg", price: 20.00, desc: "川菜館必點(diǎn)" } ] }, { type: "商務(wù)套餐", products: [ { id: 20001, name: "荷葉飯", img: "http://recipe0.hoto.cn/pic/recipe/g_148/72/61/1073522_c9b4af.jpg", price: 12.00, desc: "好吃的荷葉飯" }, { id: 20002, name: "奢華版荷葉飯", img: "http://recipe0.hoto.cn/pic/recipe/g_148/40/f8/849984_c84667.jpg", price: 15.00, desc: "精裝版" } ] }, { type: "主食", products: [ { id: 30001, name: "芝麻拌苦瓜", img: "http://res.hoto.cn/5c7787ea0135db3ab01db0d5.jpg!default", price: "12.00", desc: "這款燕麥南瓜餅,外皮軟糯,內(nèi)餡香甜" } ] }, { type: "其他", products: [ { id: 40001, name: "蘇格蘭蛋", img: "http://recipe0.hoto.cn/pic/recipe/l/2a/67/1140522_c0045b.jpg", price: "25.80", desc: "據(jù)說(shuō)這叫蘇格蘭蛋。其實(shí)油炸的我吃得少做的更少" } ] } ] // 封裝 模糊搜索的方法 function autoPlays(x) { x.style.border = '5px soild blue' } $(function () { var search_input = $(".search_box input"), search_content = $(".search_content"); $(search_input).on("keyup", function () { if (search_input.val() == '') { $(search_content).show(); } // $(".search_content li:contains(" + search_input.val().trim() + ")").show(); // $(".search_content li:not(:contains(" + search_input.val().trim() + "))").hide(); //第二中方法 $(".search_content li").hide().filter(":contains(" + search_input.val().trim() + ")").show(); }); }); $(".ftop").click(function () { history.back(1); }) $('#index-to').keyup(function () { var search_input = $(".search_box input") if (search_input.val() != '') { $('.rege').css({ display: 'block' }) $('#view-to').css({ display: 'block' }) } else { $('#view-to').css({ display: 'none' }) $('.rege').css({ display: 'none' }) } }) $('.rege').click(function () { $('#index-to').val(''); $('#view-to').css({ display: 'none' }) $(this).css({ display: 'none' }) }) // 遍歷arrAllProducts 數(shù)組 for (var key in arrAllProducts) { console.log(arrAllProducts[key].products) $.each(arrAllProducts[key].products, function (i, value) { var oLi = "<li class='row'><img src='' class='inh' alt='圖片加載失敗'><a href='javascript:;'>" + value.name + "</a></li>"; console.log(value.img+'nnnnnimg') var oLis = $(oLi); oLis.appendTo($("#view-to")) let uuu = $('.inh') uuu[i].src = value.img console.log(value.name) }) }
搜索效果圖如下:
以上所述是小編給大家介紹的jQuery如何實(shí)現(xiàn)模糊搜索詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)加載與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-09-09jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式
jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式,需要的朋友可以參考一下2013-03-03jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jquery ajax后臺(tái)返回list,前臺(tái)用jquery遍歷list的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jQuery篩選數(shù)組之grep、each、inArray、map的用法及遍歷json對(duì)象
本文主要介紹jQuery中g(shù)rep、each、inArray、map的用法,并附實(shí)例講解,非常實(shí)用,有需要的朋友可以參考一下。2016-06-06Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運(yùn)用越來(lái)越多了,讓我們來(lái)實(shí)現(xiàn)以前經(jīng)常用到的DropDownList無(wú)刷新聯(lián)動(dòng)。2010-03-03JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法分享
這篇文章介紹了JQ獲取動(dòng)態(tài)加載的圖片大小的正確方法,有需要的朋友可以參考一下2013-11-11jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)無(wú)刷新下拉加載更多的相關(guān)資料,需要的朋友可以參考下2015-07-07