
<input type="text" placeholder="Search" id="block-search"/>
<table class="table-block">
    <thead>
        <tr>
            <th><?php echo __('Blocks') ?></th>
            <th><?php echo __('Handle') ?></th>
            <th><?php echo __('Associated Template') ?></th>
        </tr>
    </thead>
    <tbody>
        <?php $row = 0; ?>
        <?php foreach( $block->getBlockHandleDetails() as $bloc ): ?>
            <tr class="<?php echo ( ($row % 2 ? 'odd' : 'even')) ?>">
                <td><?php echo __($bloc['class']) ?></td>
                <td><?php echo __($bloc['handle']) ?></td>
                <td><?php echo __($bloc['template']) ?></td>
            </tr>
            <?php $row++; ?>
        <?php endforeach ?>
    </tbody>
</table>
<script type="text/javascript">
    require([
        "jquery",
        "jquery/jquery.cookie",
    ], function($){
        (function($) {
            $('#block-search').on('keyup', function(e) {
                if ('' != this.value) {
                    var reg = new RegExp(this.value, 'i'); // case-insesitive

                    $('.table-block tbody').find('tr').each(function() {
                        var $me = $(this);
                        var hide=true;
                        $me.find('td').each(function() {
                            $td=$(this);
                            if ($td.text().match(reg)) {
                                hide=false;
                            } 
                        });
                        if(hide)
                        {
                            $me.hide();
                        }
                        else
                        {
                            $me.show();
                        }                   });
                } else {
                    $('.table tbody').find('tr').show();
                }
            });
        })(jQuery); 
    }); 
</script>