详解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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery实现计算器功能
Oct 19 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
html中两种获取标签内的值的方法
Jun 16 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
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php中define用法实例
2015/07/30 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Python的垃圾回收机制深入分析
2014/07/16 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
Python如何定义一个函数
2015/09/01 面试题
小学教师个人先进事迹材料
2014/05/17 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2016寒假假期总结
2015/10/10 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android