How to Add Autocomplete Search to Your WordPress Website

Do you want to add a search autocomplete feature to your WordPress site? Although WordPress is a robust website builder, it doesn’t provide an out-of-the-box solution for adding autocomplete to its native search feature.

Integrating autocomplete search in WordPress can improve the overall user experience on your website. However, you will need a 3rd-party tool to add this feature to your WordPress site.

In this guide, we’ll cover how to add autocomplete feature to your WordPress site’s search engine. Let’s jump in.

Content:

• Benefits of Adding Search Autocomplete in WordPress
• How to Add Autocomplete Search in WordPress
  • Installing the Ajax Search Lite plugin
  • Enabling Search Autocomplete
  • Adding the Shortcode to your Website’s Frontend
  • Styling the Search Field
• Frequently Asked Questions
• Conclusion

Benefits of Adding Search Autocomplete in WordPress

In recent times, search engines such as Google have improved substantially. And users expect no less from your website’s internal search engine.

You may have encountered Google’s autocomplete feature if you spend time searching online. When you type a keyword such as ‘fixrunner’, Google will suggest some commonly searched terms related to this keyword.

This feature makes it easy for users to find what they search for online. And the same applies to your WordPress site’s search engine.

The native WordPress search requires users to send a request to your server before they can access their search results. This can be time and resource-consuming, considering most users don’t want to spend time waiting for their query to load on your website.

This is where implementing auto search comes in handy. By doing so, users will be able to see search results and suggestions as soon as they begin typing on your website’s search form.

In turn, it will make them spend more time on your website, improving the user’s overall experience.

How to Add Autocomplete Search in WordPress

There are 2 ways to add search autocomplete in WordPress: Manually or using a WordPress plugin. The manual approach requires you to write some JavaScript code to enable AJAX live search on your website. For that, you need to be tech-savvy to use the manual method.

For this guide, we’ll use the plugin method because it’s beginner friendly and easy to set up.

With a WordPress search plugin, you can easily improve the default WP search engine to include advanced features such as live search and autocomplete. All of these, you can achieve without the need to write any code.

If you’re using a search plugin such as SearchWP or Ajax Search Lite on your website, chances are that the plugin has this feature. You simply need to enable it from the plugin’s settings page.

We will use Ajax Search Lite, a freemium plugin, to enable search autocomplete in WordPress.

Installing the Plugin

To get started, log in to your WordPress site and then go to Plugins >> Add New. In the search box, type ‘ajax search lite’ and click the Install Now button next to the plugin name.

Be sure to activate the plugin once the installation completes. Once you’ve activated the plugin, proceed to configure the plugin’s settings.

Enabling Search Autocomplete

To access the plugin’s settings page, select the Ajax Search Lite sidebar menu. Then navigate to the General Options tab.

If you already have a search form on your site, toggle on the ‘replace theme search with Ajax Search Lite’ option. You can also enable the WooCommerce search option if you have an online store.

In the “Search in custom post types” section, you can choose which post types to search from. By default, it will search in the Posts and Pages post types. However, you can drag and drop the post types you want to add.

Below that, you can choose the fields to search from. The default option searches the post title, content, and excerpts. You can optionally include permalinks, post IDs, or search all custom fields.

To enable autocomplete, navigate to the Autocomplete & Suggestions tab. Then toggle on the search complete and keyword suggestions option.

When you’re ready, click the Save options! button to save your changes.

Adding the Shortcode to Your Website’s Frontend

Earlier, we allowed the plugin to replace WordPress’ search functionality. If you have enabled this option, you can test the search form on your site to see if the autocomplete feature is working. If it is, you can skip this section.

Alternatively, you can use the shortcode to add the search form generated by the plugin to any section of your website. Simply copy the shortcode from the plugin’s settings page and paste it into any page or widget where you want the form to be displayed.

For our example, we will create a search page and add the shortcode. To create a page in WordPress, go to Pages >> Add New.

After that, enter a title for the page. We will call ours “Search”, but you can use any name you prefer. Now, click the add block (plus) icon and select the Shortcode block.

In the “Shortcode” block, paste the search shortcode you copied from the plugin’s settings page. Then click Publish to save your changes.

Sidenote: If you’re using the classic editor, you can paste the shortcode by switching to the text editor, and pasting the shortcode directly in the editor.

When you view your website frontend, you’ll see a search field. If you type a keyword into the form, the plugin will suggest some phrases and also show related content from your website.

 

Styling the Search Bar

If you’d like, you can further customize how the search field looks on your website’s frontend. To do so, return to your WordPress admin area and go to the plugin’s settings page.

After that, click on the Layout options tab. Then select the Theme dropdown menu and choose the option you’d like to use.

Once done, be sure to save your changes.

Sidenote: You don’t need to add the shortcode again after updating the plugin’s settings.

When you preview the search page, you’ll see the autocomplete feature in action as well as the new theme style you configured.

To learn more advanced styling options such as adding custom CSS, consider checking the plugin’s documentation.

Frequently Asked Questions

These are answers to some of the questions users ask about adding search autocomplete in WordPress.

How do I use autocomplete in WordPress?

A WordPress search plugin with autocomplete functionality is required to enable autocomplete in WordPress. Ajax Search Lite and SearchWP Live Ajax Search are free plugins that provide search autocomplete out of the box for WordPress users.

What is an example of autocomplete search?

The most common example of autocomplete search can be found on Google search. When you search for a term, Google will suggest possible phrases related to the first word(s) you entered.

How do I search within WordPress?

Some WordPress themes include a search form by default when you activate it on your website. This form allows you to use the native WordPress search to find specific content on your site. However, if you can’t find the form, you can add it as a widget or use a WordPress search plugin to add a search form to your website.

Conclusion

Adding autocomplete to your WordPress sites’ search engine improves user experience. It also gives your site a modern look and feel.

In this guide, we discussed some benefits of improving your WordPress default search engine. We then showed you how to enable search autocomplete in WordPress using a plugin.

If you want to go even further, you can create your search result page and customize it to match your website’s design. To learn more, please see our customizing search results page tutorial.