wordpress search form autocomplete - php

Question

I am attempting to add auto complete search function in Wordpress, I have the code but auto complete does not trigger when i start typing in the search field, anybody can guide me in the right direction?
//php
add_action( 'init', 'casino_autocomplete_init' );
function casino_autocomplete_init() {
// Register our jQuery UI style and our custom javascript file
wp_enqueue_style('mycasino-jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
wp_enqueue_script( 'my_acsearch', get_template_directory_uri() . '/js/myacsearch.js', array('jquery','jquery-ui-autocomplete'),null,true);
wp_localize_script( 'my_acsearch', 'MyAcSearch', array('url' => admin_url( 'admin-ajax.php' )));
// Function to fire whenever search form is displayed
add_action( 'get_search_form', 'mycasino_autocomplete_search_form' );
// Functions to deal with the AJAX request - one for logged in users, the other for non-logged in users.
add_action( 'wp_ajax_casino_autocompletesearch', 'mycasino_autocomplete_suggestions' );
add_action( 'wp_ajax_nopriv_casino_autocompletesearch', 'mycasino_autocomplete_suggestions' );
}
function mycasino_autocomplete_search_form(){
wp_enqueue_script( 'my_acsearch' );
wp_enqueue_style( 'mycasino-jquery-ui' );
}
function mycasino_autocomplete_suggestions(){
// custom post type
function filter_search($query) {
if ($query->is_search) {
$query->set('post_type', array('custom_post', 'events'));
};
return $query;
};
add_filter('pre_get_posts', 'filter_search');
// Query for suggestions
$posts = get_posts( array(
's' =>$_REQUEST['term'],
) );
// Initialise suggestions array
$suggestions=array();
global $post;
foreach ($posts as $post): setup_postdata($post);
// Initialise suggestion array
$suggestion = array();
$suggestion['label'] = esc_html($post->post_title);
$suggestion['link'] = get_permalink();
// Add suggestion to suggestions array
$suggestions[]= $suggestion;
endforeach;
// JSON encode and echo
$response = $_GET["callback"] . "(" . json_encode($suggestions) . ")";
echo $response;
// Don't forget to exit!
exit;
}
// jquery
jQuery(document).ready(function ($){
var acs_action = "casino_autocompletesearch";
$("#s").autocomplete({
source: function(req, response){
$.getJSON(MyAcSearch.url+"?callback=?&action="+acs_action, req, response);
},
select: function(event, ui) {
window.location.href=ui.item.link;
},
minLength: 3,
});
});

Answer 1

Please make sure you're using get_search_form() for calls and not get_search_query() you can check this inside the themes php file where the search field has been created. The above code can only be used by themes that uses get_search_form()