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