Creating a searchbar with autosuggest in WordPress is surprisingly easy, quick and free. Here's our tutorial on how to do it.

Why should you even take the time to add Auto Search to WordPress? First of all, you’ll save time. Your blog visitors will love it more because it makes their lives easier by providing easy access to information they seek within the comfort of your site. There's a reason why Google and other information oriented search tools use this type of feature.

Note: Autosearch within WordPress can also sometimes be referred to as "live ajax search". Also, because WooCommerce uses the same database as WP, and products are simply a custom post type, this tutorial will work for the popular Ecommerce plugin as well.

What You'll Need

You'll need a code snippet manager, the ability to copy and paste, and the Live Search plugin (free on the repo).

We should note the following: any form that uses <?php get_search_form() ?>, will automatically work with this solution, and not need the next two steps. Just skip to this section if you choose that route.

However, this isn't the case for many themes, page builders and other tools. Elementor and Oxygen do not use this built in form offered by WordPress (so their users can easily style them in terms of size, font and color). So, to get a search bar with autocomplete on Elementor, Oxygen, most other page builders, and many themes, follow the steps outlined below.

Even if you add it via PHP, as pictured above, without any CSS, you'll be left with an unstyled search form. However - if you have access to your theme files/templates, this is a viable way to get a search form on your site. This will use the standard WordPress markup, so you can adjust the CSS below.

We prefer the following method, as you can edit the style and classes, add in special elements, send users to custom search endpoints and more - you're building this thing from scratch.

The PHP

First, let's build out this search form. You can add in additional inputs, CSS classes, placeholders, and more. If you keep the code exactly as is, the associated CSS will work alongside the HTML. Depending on how you are creating a website, you can simply paste this into the actual structure of the template where you want an autocomplete searchbar to end up OR go route 2.

Route 2 is probably what most site owners will use. Instead of using this raw HTML and PHP, we're going to convert it into a shortcode which makes it much more compatible with WordPress. This way, you can paste it into Gutenberg, any page builder you want, and more. There are a few ways to do this; we will detail an easy but paid method, and a more difficult, but easier method.

Paid Way (easy)

Pick up Scripts Orginizer, a premium WordPress plugin that makes it easy to manage code on your WordPress website (review). After installing, go to Scripts Organizer -> Import, found in the sidebar admin menu.

Download this file (an export of everything mentioned below), import it, and skip to grabbing the shortcode.

Once at the custom CSS section, skip to the SCORG partial section, download that JSON, import, install the live search plugin, and be up and running.

🕺🕺🕺 ⏬ 🕺🕺🕺

You can also follow the manual steps. To start, create a new entry:

Now, run through the following:

1. Give it a title
2. Enable Code Block Switch: On
3. Script Location: Shortcode
4. Copy/Paste the PHP/HTML code from above.
5. Keep all other settings default, and click publish

It should look like this when you're done with it ↘️.

Grab the shortcode which will show within the script entry on the bottom left of the code editor, or on the code snippet listing page:

Take this shortcode and insert it anywhere with Gutenberg, TINYMCE, Elementor Shortcode Widget, or any other shortcode-specific method.

Now head to step two, and add the CSS to your site.

Free Way (slightly harder)

Install the free Code Snippets plugin. Download the following code snippet, and import it into your website:

This file can also be imported into Advanced Scripts (essentially a premium, easier version of Code Snippets), and even Scripts Organizer.

Then, add the search by using the following shortcode on your frontend:

Regardless of how you add the search, if you use the underlying HTML and PHP from this section, the CSS in the next section will give it a nice style.

The CSS

If you keep the structure and classes intact, simply add this custom CSS to your website to get a well styled search form with the auto complete capability.

Note: this code is not compatible with <?php get_search_form() ?> method of inserting a search bar. However, depending on your theme, inserting a search form this way means it will inherit the styles of your theme.

You can add this CSS to your page builders utility, via Appearance -> Customize -> Additional CSS, or by using SCORG.

We suggest SCORG. Add a new CSS partial, paste the code in, and publish it (or import this file). Navigate to the Shortcode Snippet created in the previous step, go to the "SCSS Partials Manager" section and select show, search for the title of that partial and select it. Update it. Now, wherever you place the shortcode, the CSS will also load. It will only load where the shortcode is place, not globally, which is great for performance.

Now, all we need is the Magic Sauce.

The Magic Sauce (SearchWP Live Ajax Search)

This is an incredible plugin made by the team behind the SearchWP plugin suite. It's free and on the WordPress repository. Instead of complex code structures, we can install this and get a live search up and running in under a minute.

Once installed, click on the search form you've inserted with shortcode, raw code, or one that's using the native WordPress PHP insert, and you should see the following behavior:

That's it, you're done! Enjoy a search form on your WordPress website that'll autocomplete user searches using AJAX technology.

Expand Upon This Live Search In WordPress

SearchWP Live Ajax Search is a free plugin that allows you to do as the name suggests: add Live Ajax Search. It'll work with or without the premium collection of SearchWP and associated extensions. If you're not using SearchWP it'll use the standard WP search engine.

The standard WordPress search sorts by relevance (in the past, it didn't - wild!) by looking into the title of a post, then at the content. But this is still Elementor, and there are better options out there. In fact, we wrote another article discussing better alternatives, which you can read here: Better Search Solutions For WordPress

However, because Live Search is made by Search WP, it'll automatically use that engine if installed. Search WP is superior as it includes keyword stemming, more accurate matches, indexing of documents, support for WooCommerce, algorithm customization and more. We strongly suggest building your live search and using the other features of the premium plugin to offer even better search results.

If you're looking for an alternative to SearchWP, Ivory Search is a lower cost plugin that offers similar features, and a LTD! This Live Search (WP Search Autocomplete) plugin should work out of the box with Ivory Search. You can use other search engines too; According to the docs, all you need to do is:

Add the following attribute to the form input: data-swpengine="supplemental" replacing ‘supplemental’ with your desired search engine name.

Listing FAQs

Even Easier With Oxygen

It's no secret we love Oxygen Builder, so here's an even easier way to add AJAX Live Search (autocomplete) with that tool.

Note: This tutorial and plugin will not work with the Oxygen Search Form Widget, because as mentioned in a previous section, it does not use the standard PHP method of inserting a search form, nor does it include the needed data attribute.

Easy steps:

1. Add code block wherever you want the search form, paste in PHP found below (or paste in Hydrogen shortcodes which will make the code block automatically)..
2. Add CSS found below to Oxygen Global CSS, change as you'd like (mainly colors).
3. Install and activate Live Search plugin, free on repo here.
4. Bask in the glory of live search.

Because we're able to place PHP directly in templates and pages with the Page Builder, we can simply paste the following PHP into a code block, add the CSS via global settings, and call it a night (be sure you've added the live search plugin, found here).

You can also copy/paste the following Hydrogen Shortcodes (if you have Hydrogen Pack (reviewed here)).

Simply click copy, have Hydrogen installed, and paste into your page. CSS will be included in the code block.

Finally, use the CSS (taken from above):

We suggest inserting this CSS via Oxygen's Global CSS.

Here's what the final result should look like:

If you want to reuse this part, you can also simply make it into a reusable part. As long as you have the Live Search plugin installed, you should be good to go with a nice AJAX search bar for your visitors.

<?php get_search_form() ?>

Or, just use the code above if you do not need advanced customization (including but not limited to better search solutions than WP's core search). Of course, because we can use shortcodes in this page builder, you can also follow the upper half of this tutorial which will walk you through creating a short code for use on the front end of your website.

Conclusion

In 2024, it's more important than ever to give your users a great experience, and the tools that they need to access the content they want. This article presented several methods of installing WordPress live Ajax search on a website in under 15 minutes.

There are multiple methods outlined here so you can choose to use it on theme template files, generate shortcodes which are compatible with page builders, and incorporate even more methods. The plugin used to achieve the live search functionality is completely free and well designed.

Any questions? Feel free to leave them in the comment section below.