- Components
- ComboBox
Advanced Forms
Tailwind CSS ComboBox (Autocomplete)
The ComboBox JavaScript plugin enhances user experience by providing dynamic suggestions as users type in an input field.
Requires JS
Note that this component requires the use of our ComboBox plugin, else you can skip this message if you are already using Preline UI as a package.
HTML Example
A basic usage of ComboBox.
(function() {
const { element } = HSComboBox.getInstance('#hs-combobox-basic-usage', true);
const getData = document.querySelector('#hs-log-combobox-basic-usage-current-data');
getData.addEventListener('click', () => console.log(element.getCurrentData()));
})();
JSON Example (based on API pathes) New
A JSON based ComboBox (based on API pathes).
(function() {
const { element } = HSComboBox.getInstance('#hs-combobox-json-example-based-on-api-pathes', true);
const getData = document.querySelector('#hs-log-combobox-json-example-based-on-api-pathes-current-data');
getData.addEventListener('click', () => console.log(element.getCurrentData()));
})();
JSON Example (with ?search and ?limit parameters)
A JSON based ComboBox (with ?search and ?limit parameters).
(function() {
const { element } = HSComboBox.getInstance('#hs-combobox-json-example-with-search-and-limit-parameters', true);
const getData = document.querySelector('#hs-log-combobox-json-example-with-search-and-limit-parameters-current-data');
getData.addEventListener('click', () => console.log(element.getCurrentData()));
})();
