How to create an instant search results page in WordPress

I am trying to create a front-end search page for my media library inside WordPress.

I want to create a dedicated search page for this showing instant search results similar to this: https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/

To do this I have connected WordPress to Algolia using your plugin (https://wordpress.org/plugins/search-by-algolia-instant-relevant-results/) and it has uploaded the wp_posts_attachment data as my search index.

This index works inside the Algolia dashboard. For example, I can search for “Sun” and it will show me images tagged with Sun.

But there are two problems…

  1. When I visit my WordPress website search page using the same term nothing shows.

For example, when I visit https://www.elementpaints.com/?s=sun it shows 1 results for a post that contains the word Sun, instead of all the images that are tagged with the word Sun (it works inside the Agolia dashboard, just not on the live site).

So why are the image search results not showing?

  1. I’m not sure how to implement a display that looks the same as your instant search results demo in your help docs here: https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/.

I have created a page that I can use as a WordPress custom search template to display this instant search results page, but I’m not sure exactly what code I should be copy pasting into the custom search template?