Autocomplete Search In WordPress

WordPress autocomplete search functionality is automatically helps them finish their search and/or suggests content with that matches.

To add Autocomplete Post functionality follow below step,

1 : If search form is not available in theme then create search-form.php template file and put below code in create template file or any template file in which you want to add search form.

<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label for="s"><?php _e( 'Search', 'theme-domain' ); ?></label>
    <input type="text" name="s" id="s" class="search" placeholder="<?php esc_attr_e( 'Search', 'theme-domain' ); ?>" />
    <input type="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e( 'Search', 'theme-domain' ); ?>" />
</form>

2: We need to enqueue autocomplete js and css file in functions.php for autocomplete search.

<?php 
function autocomplete_scripts() {
  wp_enqueue_style( 'jquery-auto-complete-css', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css', array(),'1.0.7'   );
  
 
  wp_enqueue_script( 'autocomplete-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', false );
  wp_localize_script( 'autocomplete-js', 'Autocomplete-script', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_enqueue_scripts', 'autocomplete_scripts' );

3: Now we can create our AJAX action in WordPress:

add_action( 'wp_ajax_auto_complete_searching', 'auto_complete_searching' );
add_action( 'wp_ajax_nopriv_auto_complete_searching', 'auto_complete_searching' );

function auto_complete_searching() {
    
    
      $results = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}posts WHERE post_title LIKE '%".$_POST['term']."%' AND post_status='publish' AND post_type = 'post'", OBJECT );
	
      $items = array();
	   
      if( !empty( $results ) ) {
	   foreach( $results as $post ) {
		$items[] = $post->post_title;	
	    }			
	}
		
      wp_send_json_success( $items );
}

4: Now we add jquery code in custom.js file:

jQuery( function(){
   jQuery( ".search-modal-inner .section-inner" ).after( '<ul class="list-group" id="result"></ul>');
   jQuery( ".search-field" ).keyup( function() {
	var term = jQuery(".search-field").val();
	jQuery("#result").html('');
	jQuery.ajax( {
		type : "post",
		url : autocomplete_script.url,
		data : {
			  action: "auto_complete_searching", 
			  term : term
			},
		success: function( data ) {
					 
			jQuery.each( data, function( key, value){
			   if( value == ''){
				jQuery("#result").text("Result Not Found");
			    } else {
				  for (var i=0; i< value.length; i++) {
					jQuery("#result").append('<li class="list-group-item link-class">'+ value[i] +'</li>');
				  }
			    }
			});
					
		}
         });
     });

    jQuery('#result').on('click', 'li', function() {
	var click_text = jQuery(this).text().split('|');
	jQuery('.search-field').val(jQuery.trim(click_text[0]));
	jQuery("#result").html('');
    }); 
});

Here Output looks like as,