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 Docs UI Kit:

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 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 to enable it.

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

The results are in a JSON-file. The path to the file is specified in the data attribute (data-url) of the search input.

Basic example 

                      
                        <form class="form-inline input-group-sm">
                          <input class="js-search form-control form-control-sm w-100" type="text" placeholder="Search..." data-url="../assets/include/json/autocomplete-data.json">
                        </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.