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标题都消失了＃39;正如其他书籍与查询不匹配一样。

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

    });

注意：未经测试

jQuery quickSearch / Live Search

1 个答案: