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>
Basic example
<!-- 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 -->