Combobox autocomplete
<script>
System.import('/uno/components/form/combobox.js').then(function (module) {
var combobox = new module.Combobox(document.getElementById('example_combobox'));
combobox.allowUnknown = false;
combobox.data = data; // your data
});
</script>
Combobox met meerdere items
<script>
System.import('/uno/components/form/combobox.js').then(function (module) {
let multipleComboBox = new module.Combobox(document.getElementById('multiple_combobox'), true);
});
</script>
Combobox ajax calls
De inhoud van een combobox kan ook gevuld worden met data van een backend.
Hiervoor moet de mode
op `2` (module.MODE_AUTOCOMPLETE
)
gezet worden.
Door een listener op de input te zetten kan er een ajax call
gedaan worden, het resultaat van de call wordt dan gevoed aan de combobox.
Voer een kleur of kleurcode in
<script>
System.import('/uno/components/form/combobox.js').then(function (module) {
ajaxCombobox = new module.Combobox(document.getElementById('example_combobox_ajax'));
ajaxCombobox.mode = module.MODE_AUTOCOMPLETE;
var input = document.getElementById('example_combobox_ajax').querySelector('input');
input.addEventListener('input', function(event) {
// Make your ajax call here
// and set the result to `ajaxCombobox.data = result`
});
});
</script>
Combobox met objecten
Naast simpele strings kan de comobox ook gevoed worden met een array van
objecten. Hiervoor moet wel de labelField
& de filterFunction
worden gezet voor een correcte werking
Naam opleiding of crebo-nummer
<script>
System.import('/uno/components/form/combobox.js').then(function (module) {
var objCombobox = new module.Combobox(document.getElementById('example_combobox_obj'));
objCombobox.data = [
{
"kwalificatie": "10773",
"kwalificatieNaam": "Leidinggevende Versindustrie"
},
{
"kwalificatie": "22240",
"kwalificatieNaam": "Operator"
},
{
"kwalificatie": "22243",
"kwalificatieNaam": "Productiemedewerker versindustrie"
},
{
"kwalificatie": "22244",
"kwalificatieNaam": "Medewerker versdetailhandel"
}
];
objCombobox.labelField = 'label';
objCombobox.filterFunction = function(item) {
return
item.kwalificatieNaam.toString().toLowerCase().indexOf(objCombobox.query.toLowerCase()) > -1 ||
item.kwalificatie.toString().toLowerCase().indexOf(objCombobox.query.toLowerCase()) > -1;
};
objCombobox.labelFunction = (value) => {
return `${value.kwalificatie} - ${value.kwalificatieNaam}`;
};
document.getElementById('example_combobox_obj').addEventListener('combobox-select', function(e) {
//Doe iets met het event
})
});
</script>
Javascript API
Constants
De combobox heeft een aantal constanten
Constant | Waarde |
---|---|
MODE_FILTER |
1 |
MODE_AUTOCOMPLETE |
2 |
Publieke eigenschappen
Eigenschap | Type | Omschrijving |
---|---|---|
allowUnknown |
boolean | Is invoer wat niet in de lijst voorkomt toegestaan |
data |
array | De items van de combobox. String of object |
filterFunction |
function | Functie welke wordt aangeroepen om de dataset te filteren.function(element: any, index: number, array: any[]): boolean Op basis van de standaard Array.filter Link opent in nieuw tabblad methode |
isOpen |
boolean readonly | Indicatie of de combobox open is |
labelFunction |
function | Wordt voor elk element in de lijst aangeroepen, retourneerd een string met het weergave label voor dat item .function(value: any): string |
loading |
boolean | Indicatie of de combobox data aan het laden is |
mode |
number |
Mode van de combobox.MODE_FILTER : Gaat uit van een vaste lijst van waardes waarin gefilterd kan worden.MODE_AUTOCOMPLETE : Gaat uit van een variabele lijst van waardes welke via een ajax call wordt opgehaald |
query |
string readonly | De huidige waarde van het invoerveld |
validationError |
string | De melding die getoond wordt bij ongeldige invoer |
value |
string object | De waarde van het huidig geselecteerde item |
Publieke methodes
Methode | Omschrijving |
---|---|
open() |
Opent de combobox |
close() |
Sluit de combobox |
destroy() |
Verwijdert de combobox, verwijdert alle event-listeners. Roep deze methode aan wanneer je de combobox wilt verwijderen! |
Publieke events
Event | Omschrijving |
---|---|
combobox-select Cancelable |
Wanneer een item in de combobox geselecteerd wordt. Bevat de
property data met het geselecteerde item. |
combobox-open Cancelable |
Wanneer de combobox geopend wordt. |
combobox-close Cancelable |
Wanneer de combobox gesloten wordt. |
Benodigde stylesheets
/uno/core/animations.css
/uno/components/form/combobox.css
/uno/components/form/form.css
/uno/components/form/input.css
/uno/components/form/filter.css
/uno/components/form/checkbox.css
/uno/components/list/list-filter.css
/uno/components/spinner/spinner.css