Easy to use Algolia for static website?

Hello. I’m a new user of Algolia who is not familiar with Javascript or web development in general. I would like to use Algolia to build a search interface for my personal website. I’m struggling getting it to work.

Wondering why Algolia doesnt generate a snippet of code, where I’d just have to enter the API key and Index ID and use it wherever I needed search?

I tried to work with instantsearch.js like a toddler who doesn’t know exactly what he is doing, and obviously not getting the right results…

Appreciate any help to get me out of misery.

I followed this how-to : Add Algolia Search To Hugo Static Website

  1. Created an index and verified that it works in Algolia dashboard.
  2. Added the necessary Javascript elements to display a search box.

Here is where I am: https://aravindh.net/test_search.html
(you can view the source to see my messy JS)

However, by default it displays all the results (as if I searched for *) instead of displaying an empty box and waiting for the user to type something to search. I imagine that this is designed in such a way that I can point to this page from a HTML form tag so that user can see the search results. But, I’d like an autocomplete search from the main page just like their examples.

What I would like is a block of code, that is like below,
<style tag ### Some style code
<script tag ### load necessary JS files
<form tag with a search box and submit button
< results box that is initially empty, but displays the results based on what user types

I would basically reuse the whole thing above in every page I want to add this search feature in…

Hello aravindh,

Thanks for reaching out and for the really detailled message.

Instantsearch.js does not provide a way to hide initial results because, it’s made for a full search page thus it’s better to have results by default.
If you really want to achieve this you can follow this solution on codepen.io.

From what I get from your message, is that you want a search bar (like in header or sidebar) present on many pages. I would recommend you to use the autocomplete library, which is more suited for this use case.

Let me know if that answers your question.
Best regards

Samuel,

Yes, autocomplete library is what I was looking for, and didn’t even know it.

I was able to get it to work as in the example, and then made the results to be links that take the user somewhere to complete the search.

Here is my result: https://aravindh.net/test_search1.html

Thank you for immediate response and suggestion. Cheers!

Cool, I’m really glad you could achieve what you wanted !

Have a great day :slight_smile: