Help Constructing Autocomplete Search Bar

Hi, I’m trying to construct an autocomplete search bar, similar to the one that’s been implemented in this theme, but I can’t really use the code that this theme implemented since it has so much CSS and HTML implemented that I can’t parse out what I should be using and not.

However, I was hoping for a simple search bar that loads results of titles and descriptions and tags. Here’s what I currently have in my Javascript file.
/*! Customizations */

// Set Algolia options
  const search = instantsearch({
    appId: '',
    apiKey: '',
    indexName: '',
    hitsPerPage: 5,
    routing: true
});


// initialize SearchBox
  search.addWidget(
    instantsearch.widgets.searchBox({
      container: '#search-box',
      placeholder: 'Search...',
      poweredBy: true,
      reset: true,
      cssClasses: {
        root: 'Search-box-container',
        input: 'Search-box-input',
      }
    })
  );

  
search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: 'No results',
      item: `<div><strong>{{title}}</strong>: {{{_highlightResult.name.value}}}
              {{summary}}</div>`, 
    },
    escapeHits: true,
    transformItems: items => items.map(item => item),
  })
);
 

search.start();

Unfortunately, it doesn’t seem to load what I’m hoping for, which is a list of articles and pages on my blog with links that are clickable. It also seems that when I try to configure any settings on the indices tab in Algolia, no results show up at all.

Here’s the corresponding HTML I have implemented.

`<div id="search-box">
        <!-- SearchBox widget will appear here -->
      </div>
      </center>
      <div id="hits">
        <!-- Hits widget will appear here -->
      </div>

      <div id="refinement-list">
         <!-- RefinementList widget will appear here -->
      </div>  `