WordPress Autocomplete

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 or Easy Digital Downloads stores.

What you’ll use to add WordPress autocomplete search functionality

WordPress autocomplete example

An example of the WordPress autocomplete functionality that you’ll be able to add to your site. You can see both the autocomplete and the content suggestions.

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:

Choose post types

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:

Choose 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:

  1. Title
  2. Excerpt
  3. Featured image

Here’s an example of how the default settings look:

Suggestion results

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

Configure image

Similarly, if you go to Layout options → Results Layout, you can control exactly what text information displays:

Configure metadata

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:

Live search box theme

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:

  1. 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.
  2. 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.)
  3. 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:

Options to add search

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:

Shortcode vs widget

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:

autocomplete search options

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:

Search filter options

To turn these options on, go to the Frontend Options area:

Enable search filter options

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.

Refine keywords

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:

Refine keywords

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
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

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Download free guide