2015-01-22 3 views
0

Я внедрил jQuery quickSearch (пример # 1 с изменениями) в шаблон WordPress успешно, но для того, чтобы он был действительно совершенным, мне нужна помощь, чтобы достичь того, что я хочу. Мне нужно настроить часть jQuery и это не мой сильный костюм.jQuery quickSearch/Live Search

В моем шаблоне 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 «исчезают», как и остальные книги, не соответствующие запрос сделать.

+0

может быть, это поможет вам, http://codepen.io/chriscoyier/pen/tIuBL, https://github.com/roparz/Light -Javascript-Table-Filter – amtest

ответ

0

Просьба под кодом и дайте мне знать информацию о выходе.

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

    }); 

Примечание: Непроверено

+0

Спасибо за помощь. К сожалению, теперь все заголовки h4 скрыты/не отображаются даже до ввода чего-либо в поле поиска. – Croco2511

+0

Не могли бы вы попросить еще раз? И могу ли я заглянуть в ваш сайт? –

+0

Теперь поиск не работает вообще. – Croco2511