Autocomplete

An autocomplete engine

Include the Alpinejs lib in your html:

  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

Include the component:

  <script src="https://unpkg.com/@alpinebricks/[email protected]/dist/index.min.js"></script>

Initialize it:

<script>
var $ac;
document.addEventListener('alpine:init', () => {
  $ac = $autocomplete.create();
});
</script>

Use it in html:

<div x-data>
  <input id="searchinput"
    x-on:input.debounce.500="$ac.search('http://localhost:8080/search.html', '#results')"
    x-model="$ac.searchTerm" />
  <div id="results"></div>
  <div class="px-2 py-5 d-flex justify-content-center">
    <div class="spinner-border" role="status" x-show="$ac.isLoading">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
</div>

Methods

• search(url: string, destSelector: string): run the search query
• resetSearch(idDest: string)): reset the search results area
• resetInput(idDest: string): reset the search input content
• resetAll(inputIdDest: string, searchIdDest: string): reset both search area and input

Properties

• searchTerm: the current searched term
• isLoading: true if the search is running

Getters

• hasResults: true if the search term is not null and the search has finished loading

Events

A custom result-loaded event is fired when the search result is available. To use it in html:

<div x-on:result-loaded.window="doSomething()">

To use it in javascript:

window.addEventListener("result-loaded", function (evt) {
  console.log("result loaded event was triggered")
  // ...
})