Combobox

Combobox autocomplete

Voer een kleur of kleurcode in
  of naar de vorige stap 
<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

Zoek en selecteer een of meerdere statussen
  • Voorbereiden
  • Aangevraagd
  • In behandeling
  • Goedgekeurd
  • Afgekeurd
  of naar de vorige stap 
<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 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