如何将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();

这是我预期结果的图像。我正在尝试找到一个Algolia搜索栏，然后在其下找到一个命中表。