Combobox | Uno

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.

Kleur

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

Zoek op opleiding

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