<uxl-autocomplete>
What is?
It is a web component that allows you to create a autocomplete and customizable selector.
How Install
npm i --save @uxland/autocomplete
How to use?
import the component and use it in the html with the uxl-autocomplete tag
import "@uxland/autocomplete";
<body>
<uxl-autocomplete></uxl-autocomplete>
</body>
Attributes availables
| Attribute | Description | Default |
|---|---|---|
id |
id for uxl-autocomplete input |
uxl-autocomplete (string) |
list |
list of options available to select in the component |
[] (any[]) |
trackBy |
list of fields of the list items enabled to search by them |
["value", "name"] (string[]) |
labels |
list of fields enabled to be displayed in the list items |
["value", "name"] (string[]) |
placeholder |
input placeholder |
Type to search (string) |
notFoundMessage |
message displayed when not finding results by the entered value |
Elements not found (string) |
term |
text entered in the input used to filter the elements of the list |
"" (string) |
value |
the current value of the selected list item |
undefined (any) |
listIsVisible |
allow show or hide the drop-down |
false (boolean) |
maxItems |
how many elements will be displayed as maximum in the drop-down |
10 (number) |
disabled |
if true the imput don't allow select any option |
false (boolean) |
Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|---|---|---|
| Input | ||
--uxl-autocomplete-border-color |
Border styles of the input | 1px solid #d8d8d8 |
--uxl-autocomplete--border-radius |
Border-radius of the input | 4px |
--uxl-autocomplete-height |
Height of the input | 32px |
--uxl-autocomplete-padding |
Padding of the input | 8px |
--uxl-autocomplete-font-size |
Font size of the input | 12px |
--uxl-autocomplete-color |
Color of the input text | #000000 |
--uxl-autocomplete-font-weight |
Font-weigth of the input text | 500 |
--uxl-autocomplete-disabled-opacity |
Opacity of the input when is disabled | 0.5 |
| Drop-down | ||
--uxl-autocomplete-drop-down-border |
Border styles of the drop-down | 1px solid #d8d8d8 |
--uxl-autocomplete-drop-down-padding |
Padding of the dropdown | 16px |
--uxl-autocomplete-drop-down-list--max-height |
Max heigth of the list | none |
| Main element | ||
--uxl-autocomplete-drop-down-item-padding |
Padding of the main element of the drop-down item | 8px 0px |
--uxl-autocomplete-drop-down-item-font-size |
Font size of the main element of the drop-down item | 12px |
--uxl-autocomplete-drop-down-item-color |
Color text of the main element of the drop-down item | #000000 |
--uxl-autocomplete-drop-down-item-font-weight |
Font-weigth of the main element of the drop-down item | 500 |
| Secondary element | ||
--uxl-autocomplete-drop-down-secondary-item-padding |
Padding of the secondary element of the drop-down item | 8px 0px |
--uxl-autocomplete-drop-down-secondary-item-font-size |
Font size of the secondary element of the drop-down item | 12px |
--uxl-autocomplete-drop-down-secondary-item-color |
Color text of the secondary element of the drop-down item | #979797 |
--uxl-autocomplete-drop-down-secondary-item-font-weight |
Font-weight of the secondary element of the drop-down item | 300 |
| Matching text | ||
--uxl-autocomplete-drop-down-hightlight-font-weigth |
Font-weigth of the text matching the search | 600 |
--uxl-autocomplete-drop-down-hightlight-color |
Color of the text matching the search | #000000 |
| Not found text | ||
--uxl-autocomplete-not-found-padding |
Padding of the not found message container | 8px 0px |
--uxl-autocomplete-not-found-font-size |
Font size of the not found message | 12px |
--uxl-autocomplete-not-found-color |
Color of the not found message | #000000 |
--uxl-autocomplete-not-found-font-weight |
Font-weight of not found message | 500 |
Events
The following events are available to listen
| Events | Description |
|---|---|
uxl-autocomplete-term-changed |
The term inserted in the input field has changed |
uxl-autocomplete-value-changed |
The selected item has changed |
uxl-autocomplete-list-changed |
The main list of options has changed |
uxl-autocomplete-trackBy-changed |
The track by field has changed |
uxl-autocomplete-listIsVisible-changed |
The visibility of the list options changed |
uxl-autocomplete-disabled-changed |
The availability of the input changed |
