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

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

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

/**
* 自己创建一个商品数据集合
* 点击分类时实现商品的切换
* 切换之后已经选择好的数量需要记录
*/
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 如何实现 模糊搜索的更多相关文章

  1. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  2. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  3. jQuery对标签select优化:实现模糊搜索查询功能

    由于select标签中的option条数较多,翻页查询比较麻烦,需要对select标签进行优化,解决方法是通过增加模糊查询功能来提高用户体验感. 优化后的界面如下: 在实现这个优化的过程中,参考了两个 ...

  4. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  5. jQuery实现C#CheckBoxList模糊搜索

    前言 最近开发的一套系统中需要对商品进行管理,在选择商品时,要分别从品牌.型号.商品三个类别分别选择对应的选项才能找到需要的商品,三者的关系为:品牌包含型号,型号包含商品,因此使用了三个不同的 asp ...

  6. jquery.chosen.js实现模糊搜索

    jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true ...

  7. jquery+ajax 实现text框模糊搜索并可利用listbox实时显示模糊搜索列表结果

    功能描述: text框中输入,text框下面的listbox中实时显示依据输入的内容进行模糊搜索的结果 js代码 $j(function() { $j("input[id='txtCos'] ...

  8. jQuery+css模拟下拉框模糊搜索的实现

    html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" ...

  9. jquery.autocomplete 模糊查询 支持分组

    //demo <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <lin ...

随机推荐

  1. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

  2. 响应式Web设计与CSS(上)

    1.一个例子 响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局. 1.1 简单上手 <div class="row"> <header class ...

  3. IOS - ACL (访问控制列表)

    ACL 介绍 ACL 是一款 IOS 软件工具,而不是某种协议.从名字上来看,ACL 的主要功能是控制对网络资源的访问.事实上这是 ACL 最早的用途.现在 ACL 除了能够限制访问外,更多时候,我们 ...

  4. 一篇看懂Socket开发

    Socket[套接字]是什么,对于这个问题,初次接触的开发人员一般以为他只是一个通讯工具. Socket接口是TCP/IP网络的API,Socket接口定义了许多函数或例程,程序员可以用它们来开发 T ...

  5. Vue 离开页面时的校验-mixin-beforeRouteLeave

    一定要看下函数前的注释, 需要在使用的页面定义[needCheckFlag]data属性 一定要看下函数前的注释, 需要在使用的页面定义[needCheckFlag]data属性 一定要看下函数前的注 ...

  6. hadoop2.6虚拟机安装

    Linux环境设置/*安装Hadoop集群时要确保以下几个方面1.本机与虚拟机之间是否可以通信(Ping).如果不行检查下面 1.1本机防火墙关闭(开启情况是本机可以ping虚拟机,虚拟机不能ping ...

  7. unity探索者之socket传输protobuf字节流(三)

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6986474.html 上一篇讲到了数据的处理,这一篇主要讲使用多线程收发消息 // ...

  8. java十进制二进制互转

    1. 十进制转二进制 原理:给定的数循环除以2,直到商为0或者1为止.将每一步除的结果的余数记录下来,然后反过来就得到相应的二进制了. 比如8转二进制,第一次除以2等于4(余数0),第二次除以2等于2 ...

  9. Java面试通关要点汇总整理

    简历篇 请自我介绍 请介绍项目 基础篇 基本功 面向对象的特征 final, finally, finalize 的区别 int 和 Integer 有什么区别 重载和重写的区别 抽象类和接口有什么区 ...

  10. 自动化项目Jenkins持续集成

    一.Jenkins的优点 1.传统网站部署流程   一般网站部署的流程 这边是完整流程而不是简化的流程 需求分析—原型设计—开发代码—内网部署-提交测试—确认上线—备份数据—外网更新-最终测试 ,如果 ...