Sign in
| Created |  Urls |
Favourites | Opened | Upvotes | Comments |
| 16. Apr 2022 | 0 | 0 | 301 | 0 | 0 |
An HTML combobox is an input field of type text, which can display a list of options to select from filtered by the text already written in the input field.
The wm.combobox can in addition to the mouse use tab & arrows for navigation and enter for selecting and if no item is marked in the list, enter will select the first item in the list.
Usage
Code ExamplesExample code - optionsList is a function : (selecting a municipality in Denmark)
<html>
<head>
<script src="/scripts/wm.combobox.js"></script>
</head>
<body>
<input type="text" id="tbMunicipality" />
<script>
function getMunicipalities(chars) { // the function given as optionsList (note the chars parameter, which is passed from the Combobox)
var urlMunicipalities = 'https://api.dataforsyningen.dk/kommuner/autocomplete?q=' + chars; // here using the free DAWA (Danish Addresses Web API)
return fetch(urlMunicipalities, {
method: 'get',
})
.then(function(response) {
return response.json();
})
.then(function(municipalities) {
return new Promise(resolve, reject) {
resolve(municipalities);
});
})
.catch(function(err) {
alert(err);
});
}
var myCombobox = wm.Combobox.create('tbMunicipality', getMunicipalities, {
minChars: 1, // not many municipalities in Denmark, so show filtered options right away
list_label: 'tekst' // each municipality object have a field called 'tekst', which combines the code & name of the municipality.
});
</script>
</body>
</html>
Example code - list is an array : (selecting colors)
Arguments documentationwm.Combobox.create(inputField, optionsList, configObject);
| Argument | Type | Comment | |
| inputField | string | object | Either pass the ID of the input field or a reference to the input field. | |
| optionsList | array | function | Either pass an array containing ALL the available options that can be selected from or pass a function that will supply options available. If passing a function, that function MUST return the array of options as a promise. | |
| configObject | |||
| minChars | integer | Minimum number of chars in the input field before the options is shown. The longer the options list, the more letters you want the user to write in the input field before showing the available options. Default 2. | |
| matchAll | boolean | False : the field that is matched against must start with the users input. True : the field that is matched against must contain the users input. Note that this parameter is relevant only for the optionsList given as an array. If the optionsList is given as a function, it is up to that function to define the matching logic. Default true. | |
| noResults | string | Text to show if based on the user input there are no results in the options list. If noResults is set to empty or null, the options list will not show in case of no results. Default null. | |
| callback | function | A function to be called after the user have selected an option from the optionsList. The callback function will be passed the selected option object. | |
| list_icon | string | object | I the options contains an icon and you want to display that icon in the combobox list of options to select from. Default null. | |
| list_label | string | The field of the options object that should be shown in the combobox list. Also the field that is matched against the users input. Default 'name'. | |
| list_id | string | If the options contains an ID and you need to get the selected ID. The selected ID will be set on the input field and can be retrieved as inputFieldReference.selectedId. Default null. | |
| list_zIndex | integer | Manage stacking order for the options list UI among other UI's on the page. (The options list UI is a (not-direct) child of the input fields parent, therefore control over the stacking order is limited). Default null. | |
Functions documentation| Function | Comment |
| var myCombobox = wm.Combobox.create(inputField, optionsList, configObject); | Modifies an existing input element of type text to work like a Combobox. Returns a reference to the Combobox object (not the input field, which is still available). Arguments are explained above in the Arguments documentation. |
| wm.Combobox.reConfigure(myCombobox, optionsList, configObject); | Dynamically change the optionsList, useful for search bars with a dropdown list specifying the type of search. Typically also the configObject.list_id & configObject.list_label fields needs to be updated if changing the optionsList. REMEMBER: if specifying the optionsList as a function, that function must return an array (of options) as a promise. |
| wm.Combobox.disableSuggest(myCombobox); | Disable suggest functionality, useful for search bars with a dropdown list specifying the type of search. NOTE: pressing Enter in the combobox will pass the text content of the combobox to the callback function (if specified). |
| wm.Combobox.enableSuggest(myCombobox); | re-Enable suggest functionaity, useful if the suggest functionality have been disabled. |
