CODEWITHSUNDEEP
javascriptjquery
JasonDavis
JasonDavis

Reputation: 48983

Make jQuery Search Filter use a Data attribute instead of whole DIV content

I have a KanBan board style app that shows Order records. I am trying to implement a Search filter using JavaScript and jQuery. THe goal is to filter out and hide all records that do not match the search number with the Order Number on a record.

So far I have a working example however I feel it can be improved possibly?

Here is my working JSFiddle Demo: http://jsfiddle.net/jasondavis/d7hj0ssv/1/

So basically it;s very simple....

  1. It when the search form is submitted, it hides all Order records
  2. It then uses this line $('.box:contains("'+txt+'")').show(); where txt is the search term. So after hiding all records, it display: block on any DIVs that match the search term.

$('.box:contains("'+txt+'")') is where my concern is. I believe it searches the whole entire Order record DIV for a matching string?

Each Order DIV looks like this code below so $('.box:contains("'+txt+'")') is searching this whole entire block of content for each order I believe which just looks bad performance wise!... 

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

In the DIV HTML above you might notice that each Order record also has a data attribute data-order-number="100005054" which I think might be better to use for the search if possible?

Below is my jQuery JavaScript code that handles the Search input and filtering out the DIVs based on the search term: 

$(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('');
    });

});

Upvotes: 0

Views: 1402

Answers (2)

PeterKA
PeterKA

Reputation: 24648

If the search field is the order-number then yes, using the data-attribute would greatly improve your apps response time. You would use the jQuery .filter(function) method:

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

DEMO

Upvotes: 1

Oka
Oka

Reputation: 26385

If you want to target the div with that data, you can use the attribute selector syntax. This isn't terribly performant, but it should be faster than the :contains pseudo selector.

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

or

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

Some of your elements don't seem to have data-order-number in the fiddle, so I've used the id for the example. Not sure on the specifics between the two.

http://jsfiddle.net/47m7p2am/

The other option is to generate unique IDs or shared classes.

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

This would be much faster to look up, and the ideal solution if you can edit the HTML output.

Something like:

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

Upvotes: 1

Related Questions