Vanila javascript instantsearch and autocomplete implementation (can not complete... please help)

Hi guys , Im trying to implement both features on my site.
Following this official doc , im stucked at the point when you replace the autosearch box for the autocomplete div.
At this point , I can compile the code and have not errors at the console but nothing happend on the auto complete box , so …
Can you helpme to pass this ?
Following improvements on the documentation are react bases wich I can not handle.
so…
Is it mandatory to implement some of the mentioned plugins here ( Query Suggestions/ Query Suggestions )?
If so … where can I find a javascript implementation example ? (with no react … typescript …just vanilla js).
If not , how can I finish my implementation in the simplest possible way to return a template from the autocomplete searchbox.
Thanks.

Following … my bootstrap.js

import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
import algoliasearch from 'algoliasearch/lite'
import instantsearch from 'instantsearch.js'
import historyRouter from 'instantsearch.js/es/lib/routers/history'
import {
  searchBox,
  hierarchicalMenu,
  refinementList,
  hits,
  pagination,
} from 'instantsearch.js/es/widgets'
import { connectSearchBox } from 'instantsearch.js/es/connectors'
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions'


import '@algolia/autocomplete-theme-classic'

const searchClient = algoliasearch(
  '931R1ZPBTQ',
  'de5dae88e9d0fc0588d34193d469827c'
)
const INSTANT_SEARCH_INDEX_NAME = 'posts_index'
const instantSearchRouter = historyRouter()
const search = instantsearch({
  searchClient,
  indexName: INSTANT_SEARCH_INDEX_NAME,
  routing: instantSearchRouter,
})
const virtualSearchBox = connectSearchBox(() => {})

search.addWidgets([
  virtualSearchBox({}),

  refinementList({
    container: '#category-list',
    attribute: 'category',
    templates: {
        items: `
        <div class="leo-item">
                <a href="{{url}}" style="{{#isRefined}}font-weight: bold{{/isRefined}}">
            <span>{{label}} ({{count}})</span>
          </a>      
        </div>
        `,
      },
      cssClasses: {
        item: ['leo-item'],
        root: 'leo-root',
        list: [
          'leo=list',
          'MyCustomRefinementListList--subclass',
        ],
      },
      transformItems(items) {
        return items.map(item => ({
          ...item,
          highlighted: item.highlighted.toUpperCase(),
        }));
      },


  }),
  hits({
    container: '#hits',
    templates: {
      item: `
      
      <div class="inner">
          <div row no-padding ">
              <div class="">
                  <a href="{{url}}">
                      <div class="">
                          <img src="{{picture}}"
                              class="lazyload thumbnail no-margin" alt="{{slug}}" data-nsfw-filter-status="sfw">
                      </div>
                  </a>
              </div>
          </div>

          <div row add-desc-box">
              <div class="items-details">
                  <h5 class="add-title">
                      <a href="{{url}}">{{title}} </a>
                  </h5>
  
                  <span class="info-row">
                      <span class="date">
                          <i class="icon-clock"></i> Jan 20th, 2022 at 11:06
                      </span>
                      <span class="category">
                          <i class="icon-folder-circled"></i>&nbsp;
                            <a href="http://172.30.200.117/category/automobiles/cars" class="info-link">
                              {{category}}
                            </a>
                      </span>
                      <span class="item-location">
                          <i class="icon-location-2"></i>&nbsp;
                          {{city}}
                      </span>
                  </span>
              </div>
          </div>
  
          <div class="row text-end price-box" style="white-space: nowrap;">
              <div class="row w-100">
                  <div class="col-12 mt-1  p-0 d-flex justify-content-end">
                      <h2 class="item-price">
                          $ {{price}}
                      </h2>
                  </div>
              </div>
          </div>
      </div>
  </div>

      `,

    },
  }),
  pagination({
    container: '#pagination',
  }),
])

search.start()

function setInstantSearchUiState(indexUiState) {
  search.setUiState(uiState => ({
    ...uiState,
    [INSTANT_SEARCH_INDEX_NAME]: {
      ...uiState[INSTANT_SEARCH_INDEX_NAME],
      // We reset the page when the search state changes.
      page: 1,
      ...indexUiState,
    },
  }))
}

// Return the InstantSearch index UI state.
function getInstantSearchUiState() {
  const uiState = instantSearchRouter.read()

  return (uiState && uiState[INSTANT_SEARCH_INDEX_NAME]) || {}
}

const searchPageState = getInstantSearchUiState()

autocomplete({
  container: '#autocomplete',
  placeholder: 'Search for products',
  detachedMediaQuery: 'none',
  initialState: {
    query: searchPageState.query || '',
  },
  onSubmit({ state }) {
    setInstantSearchUiState({ query: state.query })
  },
  onReset() {
    setInstantSearchUiState({ query: '' })
  },
  onStateChange({ prevState, state }) {
    if (prevState.query !== state.query) {
      setInstantSearchUiState({ query: state.query })
    }
  },
})

I will auto reply my post , hope it helps to you … . blessing.
here is everything:
all examples for all framewors and vanilla js … enjoy