By default, WordPress offers a Search block with Gutenberg editor. You can insert this Search block anywhere on your site like header, footer, sidebar and inside content area. However, the default search function does not support AJAX live search. You need a third-party plugin to add AJAX live search function to your WordPress.
Default WordPress Site Vs AJAX Search
Here is how the default search works in WordPress:
- Type the query or keywords in the search box and press enter.
- Search results will open in a new page.
- Click the desired result to open that page.
That’s a lengthy process especially when the keywords have exact matches. Here is how AJAX live search works:
- Type the query or keywords in search box.
- You will see a live search result as a dropdown.
- Click and open the page that matches your query.
The purpose of AJAX is load the content dynamically without refreshing the page. Here, you do not need to visit the search results page at all which can save user’s time and increase attention span.
Add AJAX Live Search in WordPress
First, make sure to add a search box in header or sidebar area of you site. Generally, themes offer a search icon or box in the header navigation and you can go to “Appearance > Widgets” section to add a “Search” block in sidebar area. Remember, if you are using a block-based theme then “Widgets” section will not be available and you should create a template under “Appearance > Editor”. When you have a search box in the site, follow the below steps to add AJAX live search feature.
Install SearchWP Plugin
- Go to “Plugins > Add New” section in admin panel and type “searchwp” in the search box.
- This will filter the available plugins from WordPress repository and show “SearchWP Live AJAX Search” plugin.
- Click “Install Now” button and then click “Activate” button to start using the plugin on your site.
Setup SearchWP Plugin
The plugin does not have many options and after AJAX live search automatically after activating. However, go to “SearchWP > Live Search” section to change the default settings.
- Enable Live Search – make sure this box is checked to use AJAX live search function.
- Include Styling – select “Positioning and visual styling” option to load the CSS from the plugin. If you see any CSS style issues on the frontend, then you can try with other options like “Positioning styling only” or No styling”.
- Positioning – you can choose to show the live search above or below the search box. It is a good idea to select “Below the search form” especially when you have search option in the header navigation or sidebar. If you have the search box in footer, then “Above the search form” option may work for you.
- Auto Width – enable this option so that the live search dropdown width is aligned with the search form width.
- Hide Announcements – enable this to turn off plugin announcements.
After choosing your options, click “Save Settings” button to apply the changes.
Testing AJAX Live Search
Open your site in a new browser tab and type any relevant query in the search box. You should see a list of items dynamically appears without opening a new search results page. Click the item from the list to open that page.
If you do not see any matches in the list, press enter key to open the default search page. WordPress will open the search results in one of the following search pages and show 10 items in a list as per your theme’s style.
You can change the number of items shown in the results page by going to “Settings > Writing” section any enter the number in “Blog pages show at most” box. However, this selection will also affect the number of posts shown in blog and other archive pages. It is also possible to block internal search pages in robots.txt file so that search engines will not index those page.
As you can see, SearchWP plugin will NOT change the existing WordPress search function. It will simply add AJAX live search feature and show the results dynamically. However, users can still visit the standard WordPress search page to see the list of results. Note that some commercial WordPress themes offer AJAX search as part of theme options. In that case, make use of the theme’s feature instead of using additional plugin for the same purpose.