Implementing Custom Code with jQuery UI
For those comfortable with coding, using jQuery UI to implement an autocomplete search provides a highly customizable solution. This method involves integrating jQuery UI’s Autocomplete widget with your WordPress site.
Step 1: Enqueue jQuery UI in WordPress
- Add the necessary scripts and styles in your functions.php file.
function enqueue_jquery_ui() {
wp_enqueue_script('jquery-ui-autocomplete');
wp_enqueue_style('jquery-ui-css', 'https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery_ui');
Step 2: Create the Search Form
- Add a search form to your theme (e.g., in header.php).
<form id="searchform" action="<?php echo home_url('/'); ?>" method="get">
<input type="text" id="autocomplete" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
Step 3: Add jQuery Autocomplete Functionality
- Implement the jQuery script to handle the autocomplete logic.
jQuery(document).ready(function($) {
$("#autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
url: ajaxurl,
dataType: "json",
data: {
term: request.term,
action: "autocomplete_search"
},
success: function(data) {
response(data);
}
});
},
minLength: 2,
});
});
Step 4: Handle AJAX Request in WordPress
- Add the AJAX handler in your functions.php.
function autocomplete_search() {
global $wpdb;
$term = sanitize_text_field($_GET['term']);
$results = $wpdb->get_results($wpdb->prepare("SELECT post_title FROM $wpdb->posts WHERE post_title LIKE %s AND post_status = 'publish'", '%' . $wpdb->esc_like($term) . '%'), ARRAY_A);
$suggestions = [];
foreach ($results as $result) {
$suggestions[] = $result['post_title'];
}
wp_send_json($suggestions);
}
add_action('wp_ajax_autocomplete_search', 'autocomplete_search');
add_action('wp_ajax_nopriv_autocomplete_search', 'autocomplete_search');
Output: Users will see dynamic suggestions from your WordPress posts as they type in the search box.
How to Add Autocomplete Search to WordPress?
Adding an autocomplete search feature to your WordPress website can significantly enhance user experience by providing instant search suggestions as users type. This functionality is particularly useful for websites with a large amount of content, helping users find what they’re looking for more efficiently. In this article, we will explore various approaches to implementing autocomplete search in WordPress, detailing each method step-by-step.
These are the following approaches:
Table of Content
- Using a WordPress Plugin
- Implementing Custom Code with jQuery UI
- Using an External Service (e.g. Algolia)
- Implementing Custom Code with JavaScript and AJAX