详解jQuery如何实现模糊搜索


Posted in jQuery onMay 10, 2019

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

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

基本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="请输入搜索内容" 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>

初始样式图如下:

详解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 = "<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如何实现模糊搜索

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

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
jquery登录的异步验证操作示例
May 09 #jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 #jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 #jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
详解jquery和vue对比
Apr 16 #jQuery
You might like
解决GD中文乱码问题
2007/02/14 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
简单的代码实现jquery定时器
2013/11/17 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
js 函数性能比较方法
2020/08/24 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python continue语句用法实例
2014/03/11 Python
浅谈python中set使用
2016/06/30 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python删除服务器文件代码示例
2018/02/09 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
2014道德模范事迹材料
2014/02/16 职场文书
公证委托书模板
2014/04/03 职场文书
优质服务演讲稿
2014/05/14 职场文书
音乐剧猫观后感
2015/06/04 职场文书
长江七号观后感
2015/06/11 职场文书