typeahead.js
Fast and fully-featured autocomplete library.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                typeahead: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<input class="form-control typeahead" type="text">
$('.typeahead').typeahead({
    minLength: 3,
    highlight: true
},
{
    name: 'my-dataset',
    source: mySource
});
Customize variables at:/library/extend/components/_typeahead.scss
Component's defaults:/library/components/typeahead/_defaults.scss
NameDefault valueNote
$hint-colorform-input-placeholder-color;
$popover-padding-y0.5rem;
$popover-padding-x8px;
$popover-bgpopover-bg;
$popover-text-colorpopover-text-color;
$popover-border-colorpopover-border-color;
$popover-box-shadowproperty.get(popover-shadow);Requires @use "@library/sass/modules/property";
$popover-item-padding-y0.344rem;
$popover-item-padding-x12px;
$popover-item-border-radius4px;
$popover-item-text-colormenu-item-text-color;
$popover-item-hover-bgmenu-item-hover-bg;
$popover-item-hover-text-colormenu-item-hover-text-color;
$popover-item-active-bgmenu-item-active-bg;
$popover-item-active-text-colormenu-item-active-text-color;

Make sure to read the Customize components and Understanding and using the design system guides.

{title}