Skip to content

Instantly share code, notes, and snippets.

@alexmustin
Created February 4, 2018 21:31
Show Gist options
  • Save alexmustin/c22b698689ce6caf9a562c3b405e2732 to your computer and use it in GitHub Desktop.
Save alexmustin/c22b698689ce6caf9a562c3b405e2732 to your computer and use it in GitHub Desktop.
WordPress AJAX Live Search of Post Title
<!-- // The HTML (could be part of page content) // -->
<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">Search results will appear here</div>
<?php
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
jQuery('#datafetch').html( data );
}
});
}
</script>
<?php
}
// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query(
array(
'posts_per_page' => -1,
's' => esc_attr( $_POST['keyword'] ),
'post_type' => 'post'
)
);
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>
<?php endwhile;
wp_reset_postdata();
endif;
die();
}
@mesmaili151
Copy link

hi @KixKira
first please edit your comment and put your code in 'code-block'. and let me know what error u got.
because I really can't understand what your problem is.
but, what's ur custom post-type name? because I saw 'glossary' which is my custom post-type name.

@maximum-jesse
Copy link

maximum-jesse commented Aug 23, 2023

omment and

@KixKira It's because in that line, you're mixing php and html. Either change it to this:

            if(stripos("/{$search}/", $a) !== false) {  ?>
                <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
            <?php }

or this:

            if(stripos("/{$search}/", $a) !== false) {              
                echo '<li><a href="'.esc_url( post_permalink() ).'">'.the_title().'</a></li>';
            }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment