How to add Ajax (live) search to WordPress

In today’s world, every popular website is equipped with some form of Ajax search. allowing users to experience real-time updates and dynamic search suggestions as they type. This seamless interaction enhances user engagement and provides instant access to relevant information, ensuring a smoother and more efficient browsing experience overall. So how could you add this search feature to your WordPress website. Well this step-by-step guide will teach you.

What is Ajax search

Example of a autocomplete Ajax search in WordPress using WPSolr plugin.

Ajax search consists of returning results in real-time as a user enters text in a search. It will simply place the clickable results under the aforementioned search bar and differentiates itself from regular search by not reloading the page.

This seamless integration of search functionality into the user interface provides an efficient and intuitive search experience. With Ajax search, users can explore search results without interruption, allowing for smoother navigation and quicker access to relevant content.

Multiple forms of Ajax search exist :

autocompletion : This feature completes your query automatically as you type. As shown above, it predicts the queries you are likely to type and displays them to the user. When the user clicks on one of these autocompleted suggestions, the query is sent to the server, and the user is redirected to the results page seamlessly.
suggest specific items : This type of Ajax search provides tailored suggestions based on the text entered in the search bar. For instance, if you type “sun hat,” it will return specific hats matching that description. Clicking on a result will directly lead the user to the detailed view page of the item instead of executing a search.

Example of a suggest products Ajax search in WordPress using WPSolr plugin.

Add Ajax (live) search to your WordPress website using a plugin

To add Ajax search to your website, you could use the WPSolr plugin. You can use the WPSolr Free plugin to add WordPress search, Ajax search & facets for free.

1. Setup elasticsearch

To setup Ajax search and have better performance it is recommended to use a dedicated search engine. That is why WPSolr integrates many, including Elasticsearch, into WordPress & Woocommerce websites.

Install Elasticsearch locally

We are going to use docker containers to host the different applications. To install the docker engine, use the following link : https://docs.docker.com/engine/install/.

Also, don’t forget to install docker-compose.

Create the following “docker-compose.yml” file :

version: '3.9'

services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:8.13.2
    environment:
      discovery.type: single-node
      xpack.security.enabled: "false"
    ports:
      - 9200:9200
      - 9300:9300

And start the container using :

docker-compose up -d

You can check if the the container was correctly created using :

docker ps

Using the downloaded certificate, you can now connect to the Elasticsearch service :

curl https://localhost:9200

If it works it should return something like the following :

{
  "name" : "3dce78b1c8b5",
  "cluster_name" : "docker-cluster",
  "cluster_uuid" : "630jd9bxR7692FQ3E7gB6w",
  "version" : {
    "number" : "8.13.2",
    "build_flavor" : "default",
    "build_type" : "docker",
    "build_hash" : "16cc90cd2d08a3147ce02b07e50894bc060a4cbf",
    "build_date" : "2024-04-05T14:45:26.420424304Z",
    "build_snapshot" : false,
    "lucene_version" : "9.10.0",
    "minimum_wire_compatibility_version" : "7.17.0",
    "minimum_index_compatibility_version" : "7.0.0"
  },
  "tagline" : "You Know, for Search"
}

Setup WordPress (Optional)

If you don’t already have an active WordPress server, you can set it up locally.

Simply edit the previously created “docker-compose.yml” file with the following modifications :

version: '3.9'

services:
  wp:
    image: wordpress:php8.2-apache
    ports:
      - 80:80
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    networks:
      - backend-wpd
      - frontend-wpd
  db:
    image: mysql:8.3.0
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    networks:
      - backend-wpd
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:8.13.2
    environment:
      discovery.type: single-node
      xpack.security.enabled: "false"
    ports:
      - 9200:9200
      - 9300:9300
    networks:
      - frontend-wpd


networks:
  frontend-wpd:
  backend-wpd:

Make sure that the WordPress & Elasticsearch server are in the same network so they can communicate with eachother.

If this is a production configuration, you should use volumes or bind mounts to save the data on your host machine. This ensures that there will be no critical data loss if anything happened to the container.

2. Configure WPSolr

WPSolr is a WordPress search plugin that powers up WordPress search using fast, accurate and scalable search engines. This means it can integrate Elasticsearch into any WordPress wesbite.

Since this is a locally installed Elasticsearch server, you can use the free version : WPSolr Free.

You can search for WPSolr in the WordPress plugins catalogue.

Click on the install and activate buttons for the WPSolr plugin.

Once you have installed and activated the WPSolr Free plugin, you can configure it.

To do that you first need to open the WPSolr settings page.

1. Create the Elasticsearch index

To add your WordPress data to your Elasticsearch server, you first need to create an index. You can do that directly from WPSolr.

This portion will teach you how to create your index on your locally installed Elasticsearch server.

Open the indexes tab in the WPSolr dashboard.

Create a new index.

Create the index by doing the following :

Select Elasticsearch search engine.
Enter the name of the index that will be displayed in the WPSolr settings.
Set the name of the index in the Elasticsearch server.
Set the scheme as http.
Set the elasticsearch host :
- if the WordPress server is a container in the same docker network as elasticsearch, you need to enter the name of the service (the one in the docker-compose.yml file). For this example, it should be “elasticsearch”.
- if the WordPress is on a separate server than Elasticsearch, you need to enter the ip address or hostname of the Elasticsearch server.
Set the port of the Elasticsearch.

You can now save your index.

2. Index your data

Once you have created your index, you can click on “2. Define your search” tab.

Click on the “2.2 Data” tab.

Select the data types you want to index. You can do that by simply checking the boxes.

Click on the “3. Send your data” tab.

Check the boxes of the data you selected previously. You can then click on the “Index selected post types” button to index the data.

3. Configure your search

This section will focus on replacing the WordPress search with WPSolr search powered by your Elasticsearch server.

Click on the “2. Define your search” tab.

Select the index you created previously. In this example, “local_elasticsearch”.

Select the archives to replace with WPSolr search. This means that the filtering sorting, etc… of content in the search pages and homepage will be handled by WPSolr and Elasticsearch.

Since you have selected “Search archive”, it should now be used whenever your use a search bar.

4. Configure live search

Now that you have replaced the WordPress search with WPSolr search, you can use it for suggestions (live search).

To add live search, you can head to the “2.3 Suggestions” tab.

In this page, you can create a new suggestion by clicking on the button.

The suggestions settings should appear below.

Here is the data you need to set for it to work:

Toggle the “is active” checkbox to enable this suggestion.
Enter the CSS selector. This will define where your suggestions will appear. To enable this suggestion for all search bars in your WordPress website, you can simply enter “input[type=”search”]”.
Select the query :
- Suggest keywords : This will suggest autocompleted queries.
- Suggest content : This option will suggest specific matching items.
Select the template.
Select the maximum number of results to return.

You can now save the suggestion.