Autocomplete

Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

Official documentation

For more detailed information and examples, see the official documentation: Autocomplete.

How it works

Here's how autocomplete works with Nova:

Nova uses third-party jQuery UI autocomplete plugin.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.autocomplete.js plugin.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/jquery-ui/jquery-ui.core.min.js"></script>
<script src="../../assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
<script src="../../assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>
<script src="../../assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.autocomplete.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of autocomplete
    $.HSCore.components.HSAutocomplete.init('.js-autocomplete');
  });
</script>

<!-- Contacts Form -->
<form action="#">
  <div class="input-group input-group-merge">
    <input class="js-autocomplete form-control form-control-append-icon" type="text" placeholder="Search..."
         data-url="../assets/include/json/autocomplete-data.json">

    <div class="input-group-append-merge">
      <a class="btn text-muted bg-transparent border-0 p-0 lh-1" href="#">
        <i class="nova-search"></i>
      </a>
    </div>
  </div>
</form>
<!-- End Contacts Form -->

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-url="".

Attribute	Description
`data-url`	Path to the file that contains title, link and category. The file uses for searching.