j-ListBox

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

NEW dark mode
Works with Bootstrap

Configuration:

required {Boolean} enables required (default: false)
items {String} static items key1|value1, key2 with value, key3|value
type {String} can be number (converts String values to Number)
datasource {String} path to data-source (must be array)
text {String} determines a property name for text (in data-source), default: name
value {String} determines a property name for value (in data-source) default: id
empty {String} adds an empty field
disabled {Boolean} disables this component
search {String} enables search box with this value as a placeholder
height {Number/String} height (default: 200), string can contain parent, window or .parent_selector
multiple {Boolean} true expects Array in path (default: false)
exec {String} a link to function which is executed when the user click on the item

Use it with <ui-component name="listbox">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="width:400px">
	<ui-component name="listbox" path="items" config="search:Search;required:true;items:Blue|1,Red|2,Green|3,Purple|4,Orange|5,Rose|6,Gray|7,Black|8;type:number"></ui-component>
</div>

<script>
	var items = 3;
</script>