Lesson 5. Connecting jQuery Autocomplete to the Post Autocomplete Plugin

public function post_autocomplete_form()
{
	$content  = '<form class="wrap-post-autocomplete" method="GET">';
	$content .= '<input type="text" name="text" class="post-autocomplete-field" placeholder="Enter text to search">';
	$content .= '</form>';

	return $content;
}

Of course, it would be easier to integrate with the native WP search form, avoiding the need to fetch results from the DB manually. But since this is an educational tutorial, and the goal is to explore features—not optimize—we’ll continue with our plan.

Plugin Styles

Next, open the plugin stylesheet and add the following two classes:

.post-autocomplete-field {
	width: 100%;
}

.post-autocomplete-field__loader {
	background: url('loader.gif') no-repeat center right;
}

- `.post-autocomplete-field` — sets max width to 100%.
- `.post-autocomplete-field__loader` — adds a loader icon while the AJAX request is processing.

JavaScript Code

Open the script file at `/wp-content/plugins/wp-post-autocomplete/assets/script.js` and insert the following code:

jQuery(document).ready(function($)
{
	jQuery(".post-autocomplete-field").autocomplete({
		source: function(request, response) {
			jQuery(".post-autocomplete-field").addClass('post-autocomplete-field__loader');
			
			$.post(WpPostAutocomplete.ajax, {
				term: request.term,
				action: WpPostAutocomplete.action,
				security: WpPostAutocomplete.security,
			}, function(data)
			{
				if(data.success == false)
				{
					alert(data.data.message);
					return false;
				}

				response($.map(data.data, function(value) {
					return  {
						value: value.title,
						label: value.title,
					};
				}));
			}, 'json');
		},
		open: function()
		{
			jQuery(".post-autocomplete-field").removeClass('post-autocomplete-field__loader');
		},
		select: function(e, ui)
		{
			jQuery(".post-autocomplete-field").val(ui.item.value);
			jQuery('.wrap-post-autocomplete')[0].submit();
		},
		minLength: 3,
		appendTo: '.wrap-post-autocomplete',
	});
});

This is standard jQuery Autocomplete logic. Some notes:

- Add a preloader class while typing:

jQuery(".post-autocomplete-field").addClass('post-autocomplete-field__loader');
/* and */
open: function()
{
	jQuery(".post-autocomplete-field").removeClass('post-autocomplete-field__loader');
},

- Remove the class when autocomplete results appear.

- We use an AJAX POST request to retrieve results from the server, sending the term as a parameter. If successful, we use the `response` function to populate the list:

response($.map(data.data, function(value) {
	return  {
		value: value.title,
		label: value.title,
	};
}));

- The `select` function:

select: function(e, ui)
{
	jQuery(".post-autocomplete-field").val(ui.item.value);
	jQuery('.wrap-post-autocomplete')[0].submit();
},

Fires when a user clicks on an autocomplete suggestion. Upon selection, the phrase is placed in the input field, and the form is submitted to display the search results.

That’s it! You can view the source code for this lesson on GitHub via this link.

List of all lessons in this series

• Lesson 1. How to write a WordPress plugin from scratch
• Lesson 2. Creating a shortcode for WP Post Autocomplete plugin
• Lesson 3. Enqueuing styles and JS scripts for the plugin
• Lesson 4. Working with Ajax in the post autocomplete plugin
• Lesson 5. Connecting jQuery Autocomplete to the post autocomplete plugin
• Lesson 6. Displaying the post list and adding pagination