jQuery 快速搜索/实时搜索

Question

我成功地将jQuery quickSearch（示例#1 更改）实现到了 WordPress 模板中，但为了使其真正完美，我需要帮助来实现我想要的我必须调整 jQuery 部分，但事实并非如此我的强项。

在我的 header.php 模板中，我有：

<?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
}
?>

在我的 WordPress 模板中（省略查询）：

<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>

当我现在通过输入书名来使用搜索时，不仅这本书会显示为结果，而且所有 h4 标题也会显示。 我想要的视觉结果是只有书的 h4 标题（即书所属系列的名称）和书本身保留，所有其他 h4 标题“消失”，就像其他书与查询不匹配一样做。

Answer 1

试试下面的代码，让我知道输出。

    $(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');
    }

    });

注意：未经测试