使用ajax或jquery实时搜索到wordpress自定义post_type标题列表

Question

I am trying to adding a AJAX live search to filter posts title in my wordpress theme to sort the output post list. I have added a image the current output. please

I added a input field for filter the list view

  <input placeholder="Search here........." type="text" />

Bellow is my custom page type to output the list of custom post here my custom post-type is circular

<?php /*Template Name: Circular search*/
 function TrimTitle($s) {
    $maxLength = 80;
    if (strlen($s) > $maxLength) {
        echo substr($s, 0, $maxLength - 5) . ' ...';
    } else {
        echo $s;
    }
}
?>

<?php get_header(); ?>
<input placeholder="Search here........." type="text" />
<?php 
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$circular_query= new WP_Query(array(
    'post_type'=>'circular',
    'posts_per_page' => 7,
    'order' => 'DESC',
    'paged' => $paged,
));

if($circular_query->have_posts()) :
    while($circular_query->have_posts())  : $circular_query->the_post();
     $file = get_post_meta(get_the_ID(), 'circular_attachment', true); 
     //get the url
     $url = $file['url'];
    ?>
    <ul>
        <li>
            <a href="<?php the_permalink() ?>" title="Link to <?php the_title_attribute() ?>">
             <i class="fa fa-file-pdf-o circular-list-icon" aria-hidden="true"></i>  <?php the_time( 'd-m-Y' ) ?>  <?php TrimTitle(get_the_title()); ?> 
            </a>
            <a class="download-btn read-more btn btn-primary" href="<?php echo $file['url']; ?>"> Download</a>
        </li>
        <hr class="sep-circular"/>
    </ul>           
    <?php endwhile;
    $total_pages = $circular_query->max_num_pages;
    if ($total_pages > 1){
        $current_page = max(1, get_query_var('paged'));
        echo paginate_links(array(
            'base' => get_pagenum_link(1) . '%_%',
            'format' => '/page/%#%',
            'current' => $current_page,
            'total' => $total_pages,
            'prev_text'    => __('« prev'),
            'next_text'    => __('next »'),
        ));
    }
    ?>    
<?php else :?>
<h3><?php _e('No Circular found', ''); ?></h3>
<?php endif; ?>
<?php wp_reset_postdata();?>
<div class="sep-circular clearfix"></div>
<?php get_footer(); ?>

Answer 1

In your query you aren't telling WordPress which field to order by. Try this instead:

$circular_query= new WP_Query(array(
    'post_type'=>'circular',
    'posts_per_page' => 7,
    'order' => 'ASC',
    'orderby' => 'post_title',
    'paged' => $paged,
));

Also, I set the result order to ASC rather than DESC as I think that you want the posts in ASC order, don't you?