详解jQuery如何实现模糊搜索
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
如何实现 模糊搜索 当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性。
那如何去实现一个简单的模糊搜索 框呢,以下案例获取能给你一点思路。
以下案例,可以实现当按键按下时,自动检索匹配数据
基本css 样式
.row { "htmlcode"><div class="search_box"><i class="fa fa-arrow-left ftop"></i> <form action="#"> <input type="text" id="index-to" placeholder="请输入搜索内容" 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>初始样式图如下:
/** * 自己创建一个商品数据集合 * 点击分类时实现商品的切换 * 切换之后已经选择好的数量需要记录 */ 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: "传统的《桂花酒酿圆子》有现成的卖,自己做也是简单方便口味很不错" }, { id: 10003, name: "宫保鸡丁", img: "http://recipe0.hoto.cn/pic/recipe/g_148/6a/da/252522_0d88b3.jpg", price: 20.00, desc: "川菜馆必点" } ] }, { type: "商务套餐", 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: "这款燕麦南瓜饼,外皮软糯,内馅香甜" } ] }, { type: "其他", products: [ { id: 40001, name: "苏格兰蛋", img: "http://recipe0.hoto.cn/pic/recipe/l/2a/67/1140522_c0045b.jpg", price: "25.80", desc: "据说这叫苏格兰蛋。其实油炸的我吃得少做的更少" } ] } ] // 封装 模糊搜索的方法 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 数组 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如何实现模糊搜索详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:JS匿名函数内部this指向问题详析