Have you ever wanted to add “Google Style” autocomplete search to your Divi website?

Autocomplete search was invented by Google for their search engine way back in 2004. Since then though, it’s become mainstream on websites across the internet (we added it to our Divi Products Documentation earlier this year).

If you’re not sure what autocomplete search is, it can also be called predictive search, Ajax search, or autofill search.

It essentially shows search suggestions as you type, so you can choose from content that already exists without having to type out the full search query, click the search button, wait for the search page to load, and see if it found anything for you.

You can see a few examples of what this looks like. Both of the examples below are using search popups built with our Divi Popup plugin (Divi Overlays).

And here’s an example of what we’ll be creating today:

Let’s Get Started!

Step One: Install the Search IQ Plugin

We’ve tried a few different autocomplete search plugins, and we ended up landing on SearchIQ for a few different reasons:

1. It automatically applies the autocomplete search to any existing WordPress search fields. This means Divi’s default header search will automatically have the autocomplete search functionality without any further action. The same goes for Divi’s built in search module. Other plugins generate shortcodes that then have to be styled, which is not ideal.
2. The search happens on their servers (they do the heavy lifting). You set up an account, and they scan your content. This makes it much more scalable for large sites without using valuable server resources. This also allows you to do cross-site searching too which can come in handy.
3. It’s free for up to 2,000 posts! (posts= blog posts, pages, custom post types, etc).

Once you install and activate the plugin, it will prompt you to create an account on their website, verify your email, and place the API Key into the WordPress plugin on your site.

Step Two— Configure Plugin Settings

Once you’ve created an account and active the API Key on your website, you’ll wanted to ensure that you have the plugin indexing only the content you want to come up when people search.

Go to the Search IQ Configuration Tab, and configure the content settings. For example, if you don’t have any Projects, or you don’t want the plugin showing them, you can select “No” in the dropdown so the plugin won’t show them in search results.

The plugin also gives you the ability to exclude just specific pages/posts from being indexed, which will come in handy.

Once you’ve configured the indexing the way you want, you’re basically done. You can of course go through the additional options and make changes as you see fit.

The plugin will now show the autocomplete search within any WordPress/Divi search area!

The above is using Divi’s Photo Marketplace Layout that has a Divi Search module on the homepage. As mentioned previously, Search IQ will automatically apply the autocomplete search to the Divi search module too.

That’s it for this tutorial. I hope you found it useful! You can see how easy it is to add powerful autocomplete, Ajax search to your Divi website for free!

Let us know what you think in the comments, and stay tuned for more Divi tutorials, freebies, new products, and more coming in the coming days and weeks here at Divi Life!