WordPress AJAX Live Search of Post Title

form-content.html

<!-- // 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>

functions.php

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

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

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

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

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.

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>';
            }