2017-09-27 49 views
1

我有一个WordPress的帖子类型称为员工目录,列出3个bxslider转盘中的3个不同类别的员工 - 每个帖子在li。我有一个jQuery实时搜索过滤器,可以搜索所有3个类别。我还收到了一个查询,其中包含该类型和类别的帖子数量,当用户输入搜索栏时,我需要更新帖子数量。jQuery实时搜索过滤器 - 显示'没有发现'的消息和更新WordPress的帖子数

我还需要在没有结果返回时显示一条消息,指出'No Employees Found'。

我准备在我的footer.php文档中的JS:

// live search 
    $('.live-search-list li').each(function(){ 
    $(this).attr('data-search-term', $(this).text().toLowerCase()); 
    }); 

    $('.live-search-box').on('keyup', function(){ 

    var searchTerm = $(this).val().toLowerCase(); 

     $('.live-search-list li').each(function(){ 

      if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 

     }); 
    }); 

我的WordPress回路(有3个不同的类别都一样):

<div class="title-count"> 
 
    <h4>New Flyer</h4> 
 
    <span> 
 
<!-- Count number of posts in type and category --> 
 
\t <?php $args1 = array(
 
\t 'cat' => 2, 
 
\t 'post_type' => 'employee-directory', 
 
\t); 
 
\t $the_query = new WP_Query($args1); 
 
\t echo $the_query->found_posts; ?> People 
 
</span> 
 
</div> 
 
<!-- Loop through New Flyer Category --> 
 
<ul class="carousel"> 
 
    <?php 
 
$query1 = new WP_Query(array(
 
\t 'post_type' => 'employee-directory', 
 
\t 'posts_per_page' => -1, 
 
\t 'cat' => 2, 
 
\t 'orderby' => 'title', 
 
\t 'order' => 'ASC' 
 
    ) 
 
); 
 
while ($query1->have_posts()) : $query1->the_post(); ?> 
 
    <li class="nf"> 
 
     <a href="#" data-featherlight="<?php the_permalink(); ?>"> 
 
     <div class="content-box"> 
 
      <div class="content-image"> 
 
      <?php if (has_post_thumbnail()) { 
 
\t \t \t \t the_post_thumbnail('staff', array('class' => 'img-fluid')); 
 
\t \t \t \t } else { ?> 
 
      <img src="<?php bloginfo('template_url'); ?>/img/placeholder_profile_photo.png" alt="<?php the_title(); ?>" /> 
 
      <?php } ?> 
 
      </div> 
 
      <div class="content-info"> 
 
      <h5> 
 
       <?php the_title(); ?> 
 
      </h5> 
 
      <p> 
 
       <?php the_field('position'); ?> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </li> 
 
    <?php endwhile; wp_reset_postdata(); ?> 
 
</ul>

我知道我可以结合我的tw o查询到一个,但由于传送带,我需要循环在ul内启动,并且后期计数和类别名称在该循环之外,如果这样做合理的话。

Here is a link to that page on the dev site I'm working on.

我知道我可以做一些JS if语句,但我不是很确定如何实现这一点。基本上我需要WP Query和我的JS一起工作来计算帖子,但不知道从哪里开始。任何帮助非常感谢!

回答

0

经过我同事的一点帮助后,我设法让它工作。这就是我们所做的:

通过把他们都在该文件的顶部打扫了我WP_queries,其次是循环:

<?php 
 
\t $query1 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 2, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query1count = $query1->post_count; 
 
\t 
 
\t $query2 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 3, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query2count = $query2->post_count; 
 

 
\t $query3 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 4, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query3count = $query3->post_count; 
 
<div class="title-count"> 
 
\t <h4>New Flyer</h4> 
 
\t <span class="nf-count middle"><?php echo $query1count; ?></span> 
 
\t <span>People</span> <span class="nf-message"></span> 
 
\t 
 
</div> 
 
<!-- Loop through New Flyer Category --> 
 
\t <ul class="carousel"> \t \t 
 
\t <?php \t while ($query1->have_posts()) : $query1->the_post(); ?> 
 
\t \t <li class="nf"> 
 
\t \t \t <a href="#" data-featherlight="<?php the_permalink(); ?>"> 
 
\t \t \t \t <div class="content-box"> 
 
\t \t \t \t \t <div class="content-image"> 
 
\t \t \t \t \t \t <?php if (has_post_thumbnail()) { 
 
\t \t \t \t \t \t \t the_post_thumbnail('staff', array('class' => 'img-fluid')); 
 
\t \t \t \t \t \t \t } else { ?> 
 
\t \t \t \t \t \t \t <img src="<?php bloginfo('template_url'); ?>/img/placeholder_profile_photo.png" alt="<?php the_title(); ?>" /> 
 
\t \t \t \t \t \t <?php } ?> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="content-info"> 
 
\t \t \t \t \t \t <h5><?php the_title(); ?></h5> 
 
\t \t \t \t \t \t <p><?php the_field('position'); ?></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t <?php endwhile; wp_reset_postdata(); ?> 
 
\t </ul>

然后我们添加类的li每个旋转木马幻灯片和span计数并在新的JS中引用它们:

$('.live-search-list li').each(function(){ 
 
\t $(this).attr('data-search-term', $(this).text().toLowerCase()); 
 
\t }); 
 
\t \t 
 
\t $('.live-search-box').on('keyup', function(){ 
 
\t \t 
 
\t var searchTerm = $(this).val().toLowerCase(); 
 
\t var countNF = 0, 
 
\t \t \t countNFI = 0, 
 
\t \t \t countMCI = 0, 
 
\t \t \t totalItems = $('li').length, 
 
\t \t \t currentLoop = 0; 
 
\t 
 
\t \t $('.live-search-list li').each(function(){ 
 
\t \t \t \t var $this = $(this); 
 
\t \t \t \t \t \t \t 
 
\t \t  if ($this.filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
 
\t \t   $this.show(); 
 
\t \t   // count different items 
 
\t \t \t \t \t if($this.hasClass('nf')) { 
 
\t \t \t \t \t \t countNF++; 
 
\t \t \t \t \t \t } else if($this.hasClass('nfi')) { 
 
\t \t \t \t \t \t countNFI++; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t countMCI++; 
 
\t \t \t \t \t \t } 
 
\t \t   } else { 
 
\t \t    $this.hide(); 
 
\t \t   } 
 
\t \t \t \t \t currentLoop++; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t // last loop 
 
\t \t \t \t \t if(currentLoop == totalItems) { 
 
\t \t \t \t \t $('.nf-count').text(countNF); 
 
\t \t \t \t  $('.nfi-count').text(countNFI); 
 
\t \t \t \t \t $('.mci-count').text(countMCI); 
 
\t \t \t \t \t 
 
       // do this for each category 
 
\t \t \t \t \t if(countNF > 0) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t $('.nf-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.nf-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(countNFI > 0) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t $('.nfi-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.nfi-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(countMCI > 0) { 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t $('.mci-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.mci-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t });

这会更新帖子数并在用户键入搜索框时显示'找不到员工'消息。

相关问题