Puddinq.com sharing knowledge

jQuery Autocomplete with WordPress

jQuery Autocomplete with Wordpress

Assuming you know something about plugin development, I want to share a piece using jQuery autocomplete the WordPress way.

Ajax calls have been around and jQuery autocomplete has been, but you do not see them as much together in examples the WordPress way.

var aj_data;
var cache = {};

(function ($, root, undefined) {

    'use strict';

    function p_get_posts(term, suggest) {
        // ajax call
        jQuery.ajax({
            // we have set aj_data with localize to the enqueue file
            url : aj_data.ajax_url,
            type : 'post',
            data : {
                action : 'p_get_posts',
                nonce  : aj_data.nonce,
                search : term
            },

            success : function( response ) {
                cache[ term ] = response;
                suggest(response);
            }
        });
    }



    $(document).ready(function($) {

        // Select search box
        $('.search-field').autocomplete({
            minLength: 3,
            source: function ( term, suggest) {
                // term.term is the 3 letters 
                var termout = term.term;
                // check if these letters have been searched before
                if ( termout in cache ) {
                    // set the suggestion list to hold the cache
                    suggest( cache[ termout ] );
                    return;
                }
                // if searchterm letters are new
                p_get_posts(term, suggest);
            }
        });

    });


})(jQuery, this);

The included scripts

function front_assets_load() {
    if (is_admin()) return;

        // we give these values to the javascript
	$value = array(
	    'ajax_url' =>; admin_url( 'admin-ajax.php' ),
	    'nonce' =>; wp_create_nonce('ajax_nonce')
	);

        // enqueue autocomplete the wordpress way
	wp_enqueue_script('jquery-ui-autocomplete', '', array('jquery-ui-widget', 'jquery-ui-position'), '1.12.1');
	/* Enqueue theme script & style */
	wp_enqueue_style( 'your-stylesheet', get_stylesheet_uri()  );
        wp_enqueue_script( 'your-js', get_template_directory_uri() . '/assets/javascript/dist/scripts.js', array('jquery', 'jquery-ui-autocomplete'));
	// with localize we hook the value in aj_data to the script
        wp_localize_script('your-js', 'aj_data', $value);
    /* Enqueue comment-reply script if needed */
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action('wp_enqueue_scripts', 'front_assets_load');

// we set to trusy the action named p_get_posts to use the function
add_action( 'wp_ajax_p_get_posts', 'p_get_posts' ); // for logged in users
add_action( 'wp_ajax_nopriv_p_get_posts', 'p_get_posts' ); // for guests

And the function to get posts

function p_get_posts() {

	check_ajax_referer('ajax_nonce', 'nonce');

	$return = array();
	//$return[] = $_POST['search']['term'];
	$posts = get_posts(array(
		's' => $_POST['search']['term'],
		'posts_per_page'   => -1
	));

	foreach ($posts as $key => $post) {
		$return[] = $post->post_title;
	}

	wp_send_json($return);

}