Vanilla javascript instantsearch and autocomplete implementation

FAQs & Guides
#1

Hu guys ,
I need to integrate instantsearch and autocomplete functions on laravel view.
So I have two conditions:
a) To use vanila javascript
b) To bring packages from cdn (can not use npm here).
The examples provided on official docs uses npm and mixs some reactive framework so It has been very hard for me to adapt the example from here.

This is what I have so far:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
   <link rel="stylesheet" href="app.css">
   <title>auto-instant</title>
</head>
<body>
  <header class="header">
    <h1 class="header-title">
      <a href="/">auto-instant</a>
    </h1>
    <div id="autocomplete"></div>
  </header>

  <div class="container">
    <div class="search-panel">
      <div class="search-panel__filters">
        <div id="dynamic-widgets"></div>
      </div>
      <br>
      <div class="ais-InstantSearch">
        <h1>InstantSearch.js e-commerce demo</h1>
        <div class="left-panel">
          <div id="clear-refinements"></div>
          <h2>Brands</h2>
          <div id="brand-list"></div>
        </div>
        <div class="right-panel">
          <div id="searchbox"></div>
          <div id="hits"></div>
          <div id="pagination"></div>
        </div>
      </div>
    <div id="pagination"></div>
  </div>

<!--I had to remove script tags bellow or can not post--!>
  script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js" /script
  script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.37.3"/script
  script src="app.js">/script
 
</body>

</html>

and the app.js

#2

Sory for my previous post … Im not sure why can not format my posts.
I will continue here …

This is my app.js

const { algoliasearch, instantsearch } = window;
const searchClient = algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5');

const search = instantsearch({
  indexName: 'demo_ecommerce',
  searchClient,
});

const virtualSearchBox = connectSearchBox(() => {})     //Uncaught ReferenceError: connectSearchBox is not defined

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),

  instantsearch.widgets.clearRefinements({
    container: '#clear-refinements',
  }),

  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attribute: 'brand',
  }),

  instantsearch.widgets.configure({
    hitsPerPage: 8
  }),


  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
      <div>
      <img src="{{image}}" align="left" alt="{{name}}" />
      <div class="hit-name">
        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
      </div>
      <div class="hit-description">
        {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
      </div>
      <div class="hit-price">\${{price}}</div>
    </div>
`,
    },
  }),
  instantsearch.widgets.configure({
    facets: ['*'],
    maxValuesPerFacet: 20,
  }),
  instantsearch.widgets.dynamicWidgets({
    container: '#dynamic-widgets',
    fallbackWidget({ container, attribute }) {
      return instantsearch.widgets.refinementList({
        container,
        attribute,
      });
    },
    widgets: [
    ],
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

search.start();

but have two problems:
When declare the
const virtualSearchBox = connectSearchBox(() => {})
I got the error:
//Uncaught ReferenceError: connectSearchBox is not defined

How can I import this function using cdn packages ?
Regards.
Leandro.