title: Make jQuery Search Filter use a Data attribute instead of whole DIV content
body: <p>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.</p>
  
  <p>So far I have a working example however I feel it can be improved possibly?</p>
  
  <p>Here is my working JSFiddle Demo: <a href="http://jsfiddle.net/jasondavis/d7hj0ssv/1/" rel="nofollow">http://jsfiddle.net/jasondavis/d7hj0ssv/1/</a></p>
  
  <p>So basically it;s very simple....</p>
  
  <ol>
  <li>It when the search form is submitted, it hides all Order records</li>
  <li>It then uses this line <code>$('.box:contains("'+txt+'")').show();</code> where <code>txt</code> is the search term.  So after hiding all records, it <code>display: block</code> on any DIVs that match the search term.</li>
  </ol>
  
  <p><code>$('.box:contains("'+txt+'")')</code> is where my concern is.  I believe it searches the whole entire Order record DIV for a matching string?  </p>
  
  <p>Each Order DIV looks like this code below so <code>$('.box:contains("'+txt+'")')</code> is searching this whole entire block of content for each order I believe which just looks bad performance wise!...  </p>
  
  <pre><code>&lt;div class="box card-record ui-sortable-handle" data-order-id="5430" data-order-number="100005054" data-order-item-id="145" style="display: block;"&gt;
      &lt;div class="alert-message warning"&gt;
  
          &lt;div class="ordernumber"&gt;Order #100005054&lt;/div&gt;
          &lt;div class="orderid"&gt;Order ID: 5430&lt;/div&gt;
          &lt;div class="itemid"&gt;Item #145&lt;/div&gt;
          &lt;div&gt;Date Created: 2015-06-23 00:27:22&lt;/div&gt;
          &lt;div&gt;Date Modified: 2015-06-23 00:27:22&lt;/div&gt;
          &lt;div&gt;some order data here&lt;/div&gt;
  
          &lt;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"&gt;View Order Item&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>In the DIV HTML above you might notice that each Order record also has a data attribute <code>data-order-number="100005054"</code> which I think might be better to use for the search if possible?</strong></p>
  
  <hr>
  
  <p>Below is my jQuery JavaScript code that handles the Search input and filtering out the DIVs based on the search term:  </p>
  
  <pre><code>$(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('');
      });
  
  });
  </code></pre>