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
});