Как добавить виджет поискового окна Algolia в мой HTML-код?

Question

Кажется, я не могу добавить виджет поиска Algolia на свой интерфейс, и мне было интересно, где я ошибаюсь.

Ниже приведен код HTML и JS, с которым я сейчас работаю. Я пытаюсь сделать тег ввода строкой поиска Algolia, но по какой-то причине он не работает. Я знаю, что это не работает, потому что текст заполнителя должен отображаться в строке поиска.

<!-- index.html -->

  <!-- Search section -->
  <div id="search-header" class="container-fluid ais-InstantSearch">

    <div class="row">
      <div id="search-title" class="col-sm-8 col-md-7 col-xl-5 mx-auto">
        <h3>Camera search</h3>
      </div>
    </div>

    <div class="row">
        <div class="col-sm-8 col-md-7 col-xl-5 mx-auto">
            <input id="search-box" class="ais-SearchBox form-control" type="search">
        </div>
    </div>

  </div>

  <!-- Hit results -->
  <div class="row">
    <div id="hits"></div>
  </div>

 <!-- Bootstrap core JavaScript -->
  <script src="{% static 'core/vendor/jquery/jquery.slim.min.js' %}"></script>
  <script src="{% static 'core/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

  <script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
  <script src="//cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/g/algoliasearch,algoliasearch.helper"></script>
  <script src="{% static 'core/js/search.js' %}"></script>



</body>

</html>

// search.js

const search = instantsearch({
  indexName: 'instant_search',
  searchClient: algoliasearch(
    '',
    ''
  ),
  searchParameters: {
  },
});

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-box',
    // Optional parameters
    placeholder: 'Search for a job site',
    autofocus: True,
    showReset: True,
    showSubmit: True,
    showLoadingIndicator: True,
    //queryHook(query, search) {
    //  search(query);
    //},
    templates: {
      submit: 'submit',
      reset: 'reset',
      loadingIndicator: 'loading',

    },
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: 'No results for <q>{{ query }}</q>',
      item: `
        <h2>
          {{ __hitIndex }}:
          {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
        </h2>
        <p>{{ description }}</p>
      `,
    },
  })
);

search.start();

Вот изображение моих ожидаемых результатов. Я пытаюсь получить панель поиска Алголии, а затем таблицу хитов под ней.