WordPress Search Autocomplete using admin-ajax.php

functions.php

<?php
/**
 * Enqueue scripts and styles.
 *
 * @since 1.0.0
 */
function ja_global_enqueues() {

	wp_enqueue_style(
		'jquery-auto-complete',
		'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css',
		array(),
		'1.0.7'
	);

	wp_enqueue_script(
		'jquery-auto-complete',
		'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js',
		array( 'jquery' ),
		'1.0.7',
		true
	);

	wp_enqueue_script(
		'global',
		get_template_directory_uri() . '/js/global.min.js',
		array( 'jquery' ),
		'1.0.0',
		true
	);

	wp_localize_script(
		'global',
		'global',
		array(
			'ajax' => admin_url( 'admin-ajax.php' ),
		)
	);
}
add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' );

/**
 * Live autocomplete search feature.
 *
 * @since 1.0.0
 */
function ja_ajax_search() {

	$results = new WP_Query( array(
		'post_type'     => array( 'post', 'page' ),
		'post_status'   => 'publish',
		'nopaging'      => true,
		'posts_per_page'=> 100,
		's'             => stripslashes( $_POST['search'] ),
	) );

	$items = array();

	if ( !empty( $results->posts ) ) {
		foreach ( $results->posts as $result ) {
			$items[] = $result->post_title;
		}
	}

	wp_send_json_success( $items );
}
add_action( 'wp_ajax_search_site',        'ja_ajax_search' );
add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' );

global.js

/* globals global */
jQuery(function($){
	var searchRequest;
	$('.search-autocomplete').autoComplete({
		minChars: 2,
		source: function(term, suggest){
			try { searchRequest.abort(); } catch(e){}
			searchRequest = $.post(global.ajax, { search: term, action: 'search_site' }, function(res) {
				suggest(res.data);
			});
		}
	});
});

template.php

<form class="navbar-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<div class="form-group">
		<input type="text" name="s" class="form-control search-autocomplete" placeholder="Search">
	</div>
	<button type="submit" class="fa fa-search"></button>
</form>

Great! Thanks for your code.

Hi!

Thanks for your code.

Also, i need to add URL and id in results. Can you help us?

Thanks

You're very kind. Thank you!
And I've a question. i want to display thumb and title, etc..... like my attach image!

Thanks all!!

How to make the results as links so when user clicks it goes to the single post?

I had a problem when I used this code that is my search result was not update and display first when I typed. It's mean that the result appeared but it not show first when I have done typed. Moreover, when I typed exactly what I want to search, the search result not display only this result, this still display another result more. For example :

Can you give me the solution for this problem?
Thank you!

I'm sure you must have figured out by now, but in case anyone else is looking for an answer:

('.search-autocomplete').autoComplete({
	minChars: 2,
	source: function(term, suggest){
		try { searchRequest.abort(); } catch(e){}
		searchRequest = $.getJSON(global.ajax, { q: term, action: 'search_site' }, function(res) {
                     var suggestions = [];
                     for (i=0;i<res.data.length;i++)
                          if (~res.data[i].toLowerCase().indexOf(term)) suggestions.push(res.data[i]);
                     suggest(suggestions);
		});
	}
});

Awesome. Thanks for sharing.

Hi,
Thanks for the useful gist.
I am having the following error. Please see the screenshot. Your quick response would be much appreciated.

Thanks in advance.

@baranovsky-s
remove $items[] = $result->post_title; in line 61 and replace it with $items[] = get_permalink($result->ID);

where is global.min.js ?? thanks

Rename it global.js and upload it.