jQuery quickSearch / Live Search

Question

I implemented the jQuery quickSearch (Example #1 with changes) into a WordPress template successfully, but for it to be really perfect I'll need help as to achieve what I want I have to tweak the jQuery part and that's not my strong suit.

In my header.php template I've got:

<?php if(is_post_type_archive('books')){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory')?>/js/jquery.quicksearch.js"></script>
    <script type="text/javascript">
$(function () {
$('input#id_search').quicksearch('div#booklist div.cover');

        });
    </script>
<?php
}
?>

And in my WordPress template (leaving out the query):

<form action="#" id="searchform"><div><input autocomplete="off" type="text" name="s" class="search" id="id_search" onblur="if (this.value == '') {this.value = 'enter title of the book you are looking for...';}" onfocus="if (this.value == 'enter title of the book you are looking for...') {this.value = '';}" value="enter title of the book you are looking for..."/></div></form>

<div id="booklist">

<h4>Series Name</h4>

<div class="cover"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo $ftimg; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="133" height="200" /></a>
<?php
echo "<br>";
the_title();
?>
</div>

<h4>Series Name #2</h4>

<div class="cover"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo $ftimg; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="133" height="200" /></a>
<?php
echo "<br>";
the_title();
?>
</div>


and so on....

</div>

When I use the search by entering a book title now, not only this one book shows up as result but also all h4 headings do. My desired visual result would be that only the h4 heading of the book (i.e. the name of the series the book belongs to) and the book itself remain and all other h4 headings 'vanish' just as the rest of the books not matching the query do.

Answer 1

Try below code and let me know the output.

    $(function () {
    $('input#id_search').quicksearch('div#booklist div.cover',{
        'show': function () {
            $(this).addClass('show');
        }
    });

    if($('div#booklist div.cover').hasClass('show') && $.trim($('#txtEmail').val()).length>0){
        $('.show').prev('h4').css('display','block !important');
        $('h4').css('display','none');
    }

    });

NOTE: Untested