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();
}
@dominotrix
Copy link

This works fine when I am logged in as admin. But any other user visiting the website that they arent logged-in, they cant use the search form. They get: You do not have sufficient permissions to access this page. Any idea why? @mesmaili151

@mesmaili151
Copy link

did you install relevanssi plugin? and used same codes?
your visitors see this error after search in results box?

actually it works for me very well without any problem.

if its possible, send your website link to check it easier. @dominotrix

@KixKira
Copy link

KixKira commented Aug 25, 2022

Hi, I tried this way, but in the "li" it gives me an error, it is only solved by removing the line.

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
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 );
        }
    });
}
<?php
}

add_action('wp_ajax_fetch' , 'fetch');
add_action('wp_ajax_nopriv_fetch','fetch');
function fetch() {
    $args = array(
        'post_type' => array('post'),
        'posts_per_page' => 14,
        's' => esc_attr( $_POST['keyword'] ),
        'orderby' => 'post_date',
        'order' => 'DESC',
        'relevanssi' => true,
    ); 
    $the_query = new WP_Query();
    $the_query -> parse_query($arg);
    relevanssi_do_query($the_query);
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();
            $myquery = esc_attr($_POST['keyword']);
            $a = $myquery;
            $search = get_the_title();
            if(stripos("/{$search}/", $a) !== false) {              
                <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>
            }
        endwhile;
        wp_reset_postdata();  
    endif;
    die();
}

Can you help me? @mesmaili151

@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