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. 🧑🏽💻
By the end of this post, you’ll be able to add live search functionality to any WordPress site, including WooCommerce stores and many custom post type setups. 🎬
Let’s do it!
🚀 Quick setup: install Ajax Search Lite, choose which post types to search, configure what appears in the live results, style the search box, and then add it using the block, shortcode, theme replacement option, or template code.
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
- Step 2: Choose how to display content in suggestion results
- Step 3: Configure how the search box looks
- Step 4: Add your search box
- Step 5: Further refine how the plugin works
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 events 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 go to General Options → Post Type Search → Sources & Basics. Use the drag-and-drop area to choose what content is eligible by moving post types into the active search area:
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:
- Title
- Body
- Excerpt
But you can also have it search in:
- URL slug
- Categories and tags
- Custom fields (either specific custom fields or all custom fields)
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:
- Title
- Description
- 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 → Search Box layout & Theme 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 four 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.
- Block – if you’re using the WordPress block editor, you can insert the plugin’s Ajax Search Lite block wherever you want your search form to appear.
- 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 template code at the top of the page. You can turn on the theme search replacement setting in General Options → Post Type Search → Sources & Basics, or add the Ajax Search Lite block in the editor:
For example, you can see two search boxes below. The search box inside the page content is added using the shortcode or block, 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 Google autocomplete and keyword suggestions by default. But if you want to refine how they work, 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 Filters area:
Choose how the plugin treats keywords
If you want to change how the plugin comes up with its results, the General Options → Behavior → Logic and matching 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:
- Date
- Title
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.
Quick recap: choose the content sources you want to search, decide what appears in the results, match the search box to your theme, and then add it with the block, shortcode, theme replacement option, or template code. After that, you can optionally refine autocomplete, filters, keyword logic, and result ordering.
🔌 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 four included options 🔌
Do you have any other questions about adding autocomplete search to your WordPress site? Leave a comment and we’ll try to help out!
FREE GUIDE
4 Essential Steps to Speed Up Your WordPress Website
Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%. 🚀
