详解jQuery如何实现模糊搜索-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

详解jQuery如何实现模糊搜索

如何实现 模糊搜索 当我们浏览网页的时候,通常能看到搜索栏,这大大的提高了我们获取数据的目的性。
那如何去实现一个简单的模糊搜索 框呢,以下案例获取能给你一点思路。

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的鄯善网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

以下案例,可以实现当按键按下时,自动检索匹配数据

基本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 样式




    初始样式图如下:

    详解jQuery如何实现模糊搜索

    /**
     * 自己创建一个商品数据集合
     * 点击分类时实现商品的切换
     * 切换之后已经选择好的数量需要记录
    */
    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 = "
  • 图片加载失败" + value.name + "
  • "; 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如何实现模糊搜索

    以上所述是小编给大家介绍的jQuery如何实现模糊搜索详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


    文章名称:详解jQuery如何实现模糊搜索
    本文URL:http://kswsj.cn/article/jhcepj.html

    其他资讯