jQuery 如何实现 模糊搜索

jQuery 如何实现 模糊搜索

2019-05-04 22:35:12 汐 阅读数 1582

 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_41104279/article/details/89819064

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

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

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

​    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

初始样式图如下：

/**
 * 自己创建一个商品数据集合
 * 点击分类时实现商品的切换
 * 切换之后已经选择好的数量需要记录
*/
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)
        })
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103

搜索效果图如下：

 

 

 

jQuery实现对Table内容的模糊查询

2015-06-26 13:58:00 weixin_33893473 阅读数 60

 

原文链接：https://my.oschina.net/lgscofield/blog/471184

2019独角兽企业重金招聘Python工程师标准>>> 

jQuery实现对表格内容的模糊查询 

1.  
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2.  
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3.  
   <head>
4.  
   <title></title>
5.  
   <link href="css/style.css" mce_href="css/style.css" rel="stylesheet" type="text/css" />
6.  
   <script type="text/javascript" src="D:/Demo/jquery-1.8.0.js"></script>
7.  
    
8.  
   <script type="text/javascript">
9.  
    
10.  
    $().ready(function(){
11.  
    $("#txtName").keyup(
12.  
    function(){
13.  
    $("table tr:gt(0)").hide();
14.  
    var $d = $("table tr:gt(0)").filter(":contains('"+$.trim($("#txtName").val())+"')");
15.  
    $d.show();
16.  
    }
17.  
    )
18.  
    })
19.  
     
20.  
    </script>
21.  
     
22.  
    </head>
23.  
    <body>
24.  
    <p><strong>实现动态列表内容查询</strong></p>
25.  
    <div>
26.  
    <input type="text" id="txtName" />
27.  
    </div>
28.  
    <br />
29.  
    <table width="438" height="auto" border="1">
30.  
    <tr>
31.  
    <td>编号</td>
32.  
    <td>名称</td>
33.  
    <td>类别</td>
34.  
    <td>著作</td>
35.  
    </tr>
36.  
    <tr>
37.  
    <td>1001</td>
38.  
    <td>天龙八部</td>
39.  
    <td>武侠</td>
40.  
    <td>金庸</td>
41.  
    </tr>
42.  
    <tr>
43.  
    <td>1002</td>
44.  
    <td>小李飞刀</td>
45.  
    <td>武侠</td>
46.  
    <td>古龙</td>
47.  
    </tr>
48.  
    <tr>
49.  
    <td>1003</td>
50.  
    <td>逆水寒</td>
51.  
    <td>言情</td>
52.  
    <td>温瑞安</td>
53.  
    </tr>
54.  
    <tr>
55.  
    <td>1004</td>
56.  
    <td>天涯明月刀</td>
57.  
    <td>武侠</td>
58.  
    <td>古龙</td>
59.  
    </tr>
60.  
    <tr>
61.  
    <td>1005</td>
62.  
    <td>朝天一棍</td>
63.  
    <td>武侠</td>
64.  
    <td>温瑞安</td>
65.  
    </tr>
66.  
    <tr>
67.  
    <td>1006</td>
68.  
    <td>侠骨丹心</td>
69.  
    <td>武侠</td>
70.  
    <td>梁羽生</td>
71.  
    </tr>
72.  
    <tr>
73.  
    <td>1007</td>
74.  
    <td>神雕侠侣</td>
75.  
    <td>武侠</td>
76.  
    <td>金庸</td>
77.  
    </tr>
78.  
    <tr>
79.  
    <td>1008</td>
80.  
    <td>陆小凤传奇</td>
81.  
    <td>武侠</td>
82.  
    <td>古龙</td>
83.  
    </tr>
84.  
    <tr>
85.  
    <td>1009</td>
86.  
    <td>xxxxx</td>
87.  
    <td>xxxxx</td>
88.  
    <td>xxxxx</td>
89.  
    </tr>
90.  
    </table>
91.  
    </body>
92.  
    </html>

 

转载于:https://my.oschina.net/lgscofield/blog/471184