详解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.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php测试kafka项目示例
2020/02/06 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
数据库方面面试题
2012/04/22 面试题
营业员实习自我鉴定
2013/12/07 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
幼师求职信
2014/06/23 职场文书
解约证明模板
2015/06/19 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
体育教师教学随笔
2015/08/15 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技