// data attributes that are searchable let search_attributes = ['diner_name', 'order_number', 'table_number']; var search_val = ''; // rows under the active and complete tabs var $active_order_rows = $(".order-container"); $("#search").keyup(function() { search_val = $(this).val().toLowerCase(); searchOrders(search_val, $active_order_rows); }); /** * search through rows and hide those that do not match search value * @param string search term from #search * @param object rows to be shown/hidden */ function searchOrders(search_val, $order_rows) { // hide all rows initially $order_rows.removeClass('d-flex').addClass('d-none'); if(search_val.length) { $order_rows.filter(function() { var $row = $(this); var found = false; $.each(search_attributes, function(i, v) { var searched = $.trim($row.data(v)).replace(/ +/g, " ").toLowerCase(); found = searched.indexOf(search_val) >= 0 ? 1 : 0; if(found) return false; }); return found; }).addClass("d-flex").removeClass("d-none"); } else { $order_rows.removeClass('d-none').addClass('d-flex'); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter