j-SelectBox

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

Configuration:

required {Boolean} (optional) enables required (default: false)
items {String} (optional) static items key1|value1, key2 with value, key3|value
type {String} (optional) 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} (optional) adds an empty field
disabled {Boolean} (optional) disables this component
search {String} (optional) enables search box with this value as a placeholder
height {Number} (optional) height (default: 200)
if {String} (optional) arrow function as a condition for filtering of datasource, example: if:n => !n.removed
NEW raw {Boolean} (optional) allow raw HTML to be rendered as text (default: false)

Use it with <ui-component name="selectbox">. 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="selectbox" path="items" config="search:Search;required:true;items:Blue|1,Red|2,Green|3,Purple|4,Orange|5,Rose|6,Gray|7,Black|0;type:number"></ui-component>
</div>

<script>
	var items = [2, 5];
</script>