How to Add Autocomplete Search to Divi
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:
- 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.
- 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.
- 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!
Hey Tim,
Thanks for putting this tutorial forward. One comment that I’d like some help with. I’ve activated everything and it’s looking and working great except for one issue… the search results page does not work and I think it’s because I’m using the themebuilder. Your example seems to not include how it works with theme builder active.
Can you please let me know if you’ve had success with having the search results page show up when using the theme builder or not and if so how you got it to work – I currently get a mostly blank screen – no search results at all.
Hi Steven,
Are you saying that just having the Theme Builder active at all breaks the search results page. Or do you have a custom search results page active with the theme builder?
Hey Tim – I think kind of both.
before activating the Search IQ plugin I had already setup a custom theme builder page for the Wordpress default search results page. When I activated the plugin the search IQ took me to a totally different, but blank page – not the default Wordpress search page. I then noticed that a new page called ‘search’ had also been created so I instructed Divi’s theme builder to assign my search page template to that page as well. Now the search page uses the correct template, but there are no search results – the area where the search results should show remains blank.
It appears this may be the problem. Search IQ creates a new page with a shortcode [siq_ajax_search] – perhaps the themebuilder is unable to translate this shortcode into the actual results?
Any ideas?
Hey Tim – good news and bad news.
The good news is after doing some trouble shooting I identified the problem – the bad news is it seems to be a conflict with the plugin Divi Bars.
Are you able to help me further look into this?
What was the solution as I am having the exact same problem
Thank you so much! It worked on my website! 😊
I’m glad you found success with it!
Hey Tim,
Just following up with you to see if you’ve had a chance to look into the issues I flagged above?
Cheers.
Same issue Steve. If I disable divi overlay, I’ll get search results. Otherwise it’s blank search results. When I enter search criteria in SearchIQ configuration section (Results Page tab), the preview results look good. But when I do a real search on the website…. blank search results.
I’m not using a Theme builder search page. I’m letting it call the /search/ page it created.
Any solution to this other than uninstalling divi overlays?
I fixed this. Wordfence was blocking an LFI with my hosting provider to Divi overlays. I whitelisted the rule and all works. That was a tough one. Ugh.