javascript - 使 jQuery 搜索过滤器使用 Data 属性而不是整个 DIV 内容

Question

我有一个看板样式的应用程序，可以显示订单记录。我正在尝试使用 JavaScript 和 jQuery 实现搜索过滤器。目标是过滤并隐藏搜索编号与记录上的订单编号不匹配的所有记录。

到目前为止，我有一个有效的示例，但我觉得它可以改进吗？

这是我的工作 JSFiddle 演示:http://jsfiddle.net/jasondavis/d7hj0ssv/1/

所以基本上它非常简单......

1. 提交搜索表单时，会隐藏所有订单记录
2. 然后使用此行 $('.box:contains("'+txt+'")').show(); 其中 txt 是搜索词。因此，隐藏所有记录后，它会在与搜索词匹配的任何 DIV 上 display: block。

$('.box:contains("'+txt+'")') 是我关心的地方。我相信它会在整个订单记录 DIV 中搜索匹配的字符串？

每个订单 DIV 看起来都像下面的代码，因此 $('.box:contains("'+txt+'")') 正在搜索每个订单的整个内容 block ，我相信这只是看起来性能很差!...

<div class="box card-record ui-sortable-handle" data-order-id="5430" data-order-number="100005054" data-order-item-id="145" style="display: block;">
    <div class="alert-message warning">

        <div class="ordernumber">Order #100005054</div>
        <div class="orderid">Order ID: 5430</div>
        <div class="itemid">Item #145</div>
        <div>Date Created: 2015-06-23 00:27:22</div>
        <div>Date Modified: 2015-06-23 00:27:22</div>
        <div>some order data here</div>

        <a href="#" data-order-id="5430" data-order-item-id="145" data-url="/orders/orderboards/order/item/145" data-target="#myModal" class="btn btn-default openmodal">View Order Item</a>
    </div>
</div>

<小时/>

在上面的 DIV HTML 中，您可能会注意到每个订单记录还有一个数据属性 data-order-number="100005054" 我认为它可能更适合用于搜索如果可能的话？

<小时/>

下面是我的 jQuery JavaScript 代码，用于处理搜索输入并根据搜索词过滤出 DIV:

$(function() {

    // Search filter to hide and show order cards mtching the search order number
    $('#search').click(function(){
        $('.box').hide();
        var txt = $('#search-criteria').val();
        $('.box:contains("'+txt+'")').show();
    });

    $('#searchclear').click(function(){
        $('.box').show();
        $('#search-criteria').val('');
    });

});

Answer 1

如果搜索字段是订单号，那么是的，使用数据属性将大大缩短您的应用响应时间。您可以使用 jQuery .filter(function) 方法:

$('#search').on('click', function() {
    $('.box').hide().filter(function() {
        return $(this).data('order-number') == $('#search-criteria').val().trim();
    }).show();
});

DEMO