Add Live Product Search on WooFood

The following snippet will help you adding a live search above the accordion menu of WooFood.

add_action("wp_footer", function()
{
	?>
	<style>
		input.woofood-live-search
		{
			width: 100%;
			margin-bottom: 10px;
			border: none;
			border: 1px solid #bdb0b0;
			padding: 10px;
		}
	</style>
	<script>
		jQuery(document).ready(function()
		{
			jQuery( "<input type='text' class='woofood-live-search' placeholder='Search for Products...'/> " ).insertBefore( ".woofood-accordion:first" )
			jQuery( "<div class='woofood-live-results'><ul class='woofood-products'></ul></div>" ).insertBefore( ".woofood-accordion:first" )

		});
		jQuery(document).on('propertychange input', '.woofood-live-search', function (e) {
			var valueChanged = false;
			var search_value = jQuery(this).val();
			var vthis = jQuery(this);
			if (search_value=="")
			{

				jQuery('.woofood-live-results .woofood-products').html("");
			}
			else
			{



				if (e.type=='propertychange') {
					valueChanged = e.originalEvent.propertyName=='value';
				} else {
					valueChanged = true;
				}
				if (valueChanged) {




				}
				jQuery('.woofood-live-results .woofood-products').html("");

				jQuery('.woofood-product-loop').each(function( index ) {
					console.log( index + ": " + jQuery( this ).find('.product-title span:first').text().toLowerCase() );
					if(jQuery( this ).find('.product-title span').text().toLowerCase().includes(search_value.toLowerCase()))
					{
						jQuery( this).clone().appendTo( ".woofood-live-results .woofood-products" );


					}
					else
					{
						


					}
				});
			}


		});

	</script>
	<?php



});