Show/hide divs with search value

PHOTO EMBED

Tue May 04 2021 09:39:25 GMT+0000 (UTC)

Saved by @pots07 #jquery

	// 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');
        }
    }
content_copyCOPY