Want to add WordPress autocomplete search functionality to your website? You know – where visitors start typing in their query and your site automatically helps them finish their search and/or suggests content that matches.
Google, Amazon, and tons of other sites use this approach because it offers visitors a helpful search experience. And with the right WordPress autocomplete search plugin, you can add the same functionality to your site.
What you’ll use to add WordPress autocomplete search functionality
After having tested several plugins to help you add live search to WordPress, we settled on Ajax Search Lite because:
- It’s easy to set up.
- The free version will work for most sites.
- It’s very flexible.
- It’s popular and receives regular updates.
The plugin helps you add live search suggestions and taps into Google’s autocomplete functionality to add autocomplete to your search box.
To get started, make sure to install and activate the plugin on your site (here’s how to install a WordPress plugin if you need some help).
Once you’ve activated the plugin, follow these steps to configure your new WordPress autocomplete search functionality…
Step 1: Choose what content to include in search
The first thing that you’ll want to do is configure what content is eligible to be included in your search suggestions.
For example, maybe you want your suggestions to include blog posts, but not pages. If you’re using custom post types (like WooCommerce products or an event plugin), you can also choose whether or not to include that content in your search results.
To make those choices, click on the Ajax Search Lite option in your WordPress dashboard and use the Search in custom post types options to choose what content is eligible:
Further down the page, you can also choose what parts of your content the plugin searches. By default, it will search for the user’s keyword in your content’s:
But you can also have it search in:
Step 2: Choose how to display content in suggestion results
By default, the plugin will display a lot of information in the suggestion results. It includes the:
- Featured image
Here’s an example of how the default settings look:
You have full control over what information displays, though.
If you want to control the image (or turn it off), go to the Image Options tab. You can turn off the Show images in results? option to disable images. Or, you can use the other options to change:
- Image size
- Where the image comes from
Similarly, if you go to Layout options → Results Layout, you can control exactly what text information displays:
Step 3: Configure how the search box looks
One of the ways that the plugin works is by replacing your theme’s search box with its own design, so you’ll want to make sure that the plugin’s search box design matches your existing theme.
To control that, go to Layout Options and use the themes to customize how your search box looks:
You can also manually change the colors further down the page if needed.
Step 4: Add your search box (or replace your theme’s search box)
Ok – now you’re ready to actually add the WordPress autocomplete functionality to your site.
To do that, the plugin gives you three options:
- Replace theme search – with this option, the plugin will override your theme’s search functionality. For example, if you opt to use this, the plugin will replace the regular WordPress Search widget with its own search box and functionality.
- Shortcode – you can place the shortcode wherever you want your search form to appear (you can use the shortcode in pages, posts, sidebar widgets, etc.)
- PHP function – if you’re comfortable editing your theme’s code, you can use a child theme to add the search functionality directly to your theme’s template files.
The plugin gives you the shortcode and PHP function at the top of the page. And you can turn on the search replacement setting in the General Options tab:
For example, you can see two search boxes below. The search box inside the page content is added using the shortcode, while the search box in the sidebar is using a regular WordPress Search widget and the plugin’s “replace theme search” functionality:
And that’s it! Your visitors will now be able to enjoy WordPress autocomplete search on your site.
Step 5: Further refine how the plugin works (optional)
If you want to further refine things, the plugin includes a number of settings that give you even more control over exactly how your WordPress live search works.
These settings are all optional – that is, your live search will work fine even if you skip this section.
But if you want some more control, here are some helpful ways to tweak things…
Tweak the autocomplete functionality
The plugin turns on search autocomplete by default. But if you want to refine how it works, you can go to General Options → Autocomplete & Suggestions:
Give visitors filter options
If you want to give visitors more control over the search results, you can add filter options that let users:
- Search certain content, like only a post’s title
- Search specific categories
Here’s an example:
To turn these options on, go to the Frontend Options area:
Choose how the plugin treats keywords
If you want to change how the plugin comes up with its results, the General Options → Behavior area lets you:
- Show exact matches only – when turned on, the autosuggest results must exactly match the user’s keywords (kind of like using quotes when searching in Google).
- Keyword phrase logic – gives you another way to control how the plugin matches results.
Change the results order
By default, the plugin orders its suggestions by their relevance. But if you want, you can change this behavior to order results by:
To make this change, go to General Options → Ordering:
Get started with WordPress live search suggestions today!
Autocomplete and autosuggest are two great ways to improve your WordPress site’s search functionality.
To add WordPress autocomplete search to your site, Ajax Search Lite is a great option that won’t cost you a penny.
To get started with the plugin, all you need to do is:
- Choose what content to include in the suggestions
- Configure what information displays for each suggestion
- Choose how your search box should look
- Display your search box on your front-end site using one of the three included options