Methods

If your website is a single page application or if your website doesn't require a page refresh on user interactions, you'll want to make use of the following methods below.

hide()

autocomplete.hide();

When a user performs an action that should hide the autosuggest, you can call hide().

dispose()

autocomplete.dispose();

If your search bar gets unmounted or removed from the page, you'll want to do some clean up. Calling dispose() will remove all the elements, listeners, and styles that were added to the page during client instantiation.

Style Your Autosuggest

<div class="autocomplete-suggestions">
  <div class="autocomplete-suggestion autocomplete-selected">...</div>
  <div class="autocomplete-suggestion">...</div>
  <div class="autocomplete-suggestion">...</div>
</div>

<style>
  .autocomplete-suggestions {
    border: 1px solid #999;
    background: #fff;
    overflow: auto;
  }
  .autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
  }
  .autocomplete-selected {
    background: #f0f0f0;
  }
  .autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
  }
</style>

You may style autocomplete suggestions in any way you'd like. Suggestions are returned with the following HTML markup