Javascript 使jQuery搜索筛选器使用数据属性而不是整个DIV内容

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

到目前为止，我有一个工作的例子，但我觉得它可能会改进

以下是我正在使用的JSFIDLE演示：

所以基本上它,；It’很简单

它在提交搜索表单时隐藏所有订单记录

然后它使用此行

$（'.box:contains（'+txt+'））.show（）其中
txt
是搜索词。因此，在隐藏所有记录后，它会在与搜索词匹配的任何div上显示：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作为目标，可以使用属性选择器语法。这并不是非常好的性能，但它应该比
：contains
伪选择器更快

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

或

您的一些元素中似乎没有
数据顺序号
，因此我在示例中使用了id。不确定两者之间的具体情况



另一个选项是生成唯一ID或共享类

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

这将加快查找速度，如果您可以编辑HTML输出，这将是理想的解决方案

比如：

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

如果搜索字段是
订单号
，则是，使用数据属性将大大缩短应用程序的响应时间。您可以使用jQuery
.filter（函数）
方法：

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

每个订单记录也有一个数据属性：不确定性能，但
$（'.box[数据订单号*=“'+txt+']”）
是您选择
的方式。box
带有属性
数据订单号
，其中包含
txt
。感谢您提供的替代解决方案，是的，我可以更改HTML，因此我可以尝试ID MethodId，速度非常快，但是请确保页面上只有一个元素具有给定的ID。谢谢，我有兴趣尝试
过滤器
功能，所以我也会尝试一下！NP你会发现它非常方便。你知道有没有办法让它进行部分搜索匹配？例如，
10000581
的搜索结果现在与该记录匹配，但是如果他们只有
10000508
缺少最后一个数字，它仍然会匹配吗？不是很重要，但很好奇。。。使用
return..data（'order-number'）.indexOf（txt）>-1。我永远无法让你的最后一条评论生效，但我为另一个演示选择了你的答案
$('#order-number-' + txt).show();

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