Question

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

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

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

所以基本上它很简单......

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

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

每个订单DIV看起来都像下面的代码所以$('.box:contains("'+txt+'")')正在搜索整个内容块，我认为每个订单看起来都很糟糕！...

<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

如果要使用data定位div，可以使用属性选择器语法。这不是非常高效，但它应比:contains伪选择器更快。

$('.box[data-order-number="'+txt+'"]').show();

或

$('.box[data-order-id="'+txt+'"]').show();

你的一些元素在小提琴中似乎没有data-order-number，所以我使用了id作为例子。不确定两者之间的细节。

http://jsfiddle.net/47m7p2am/

另一种选择是生成唯一ID或共享类。

id="order-number-100005054" class="order-id-5418"

查找起来要快得多，如果你可以编辑HTML输出，这是理想的解决方案。

类似的东西：

$('#order-number-' + txt).show();

Answer 2

如果搜索字段为order-number，则为是，使用data-attribute可以大大缩短应用响应时间。您将使用jQuery .filter(function)方法：

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

DEMO

使jQuery搜索过滤器使用数据属性而不是整个DIV内容

2 个答案: