selectbox

The selectbox control allows the user to select one option from a list of alternatives. Only the selected value is displayed, tapping on the selectbox displays the list of options.

  • Extends basecontrol

    • Syntax 

    <div data-juci="selectbox" data-label="Check out the options" data-bind="optionsList: options"></div>
    <div data-juci="selectbox" data-bind="optionsList: options"></div>
    <div data-juci="selectbox" data-label="Data bound" data-bind="optionsList: options, ref: simpleValue"></div>
    <div data-juci="selectbox" data-label="Data bound and disabled" data-bind="optionsList: options, ref: simpleValue" disabled></div>
    <div 
	data-juci="selectbox"
	data-label="Complex Data bound"
	data-bind="optionsList: complexOptions, optionsText: function(item){return item.name}, ref: complexValue"
	data-comparator="complexComparator"></div>
    <div 
	data-juci="selectbox"
	data-label="Complex Data bound with option templating"
	data-bind="optionsList: complexOptions, ref: complexValue"
	data-comparator="complexComparator">
		<div data-juci="optiontemplate">
			<label data-bind="display: 'Name is ' + name()"></label>
		</div>
</div>
    juci.addDataset("complexValue", {value: "1", name: "red"});
juci.addDataset("simpleValue", "red");
juci.addDataset("options", ["red", "blue", "green"]);
juci.addDataset("complexOptions", [{name:"red", value: "1"}, {name: "blue", value: "2"}, {name: "green", value: "3"}]);
    function complexComparator(i1, i2){
	return i1.value == i2.value;
}
    Remarks:
    data-juci="optiontemplate" can be used to create a custom option template. The value of the control is the selected option

    Attributes

    • data-search-delay {Number}
      Number of milliseconds after which search can start processing.
    • data-search-placeholder {String}
      Placeholder text for the searchbox.
    • data-searcher {String}
      Name of function defined on the window scope. Called when a search string is entered in the options list. The function receives the following params,
      • item {Object}
        An item in the options list.
      • searchString {String}
        The searched string.
    • data-comparator {String}
      Name of function defined on the window scope. Called when a value is compared with each option available in the options list. The function receives the values compared as parameters.
    • data-bind {Object} 
      data-bind="ref: someKey, optionsList: list"
      • optionsText {Function}
        A function that is invoked for each item in the array referred by optionsList. This function is the perfect place to edit the text in case if the item is a string/number or choose the property which contains the text in case of the item is an object. The function must return the text that should display as an item in the selectbox control. The function receives the following parameter as input,
        • item {Object}
          Parameter for optionsText method. A string or number or object that displays as an item in the selectbox control.
      • ref {String}
        A string containing the reference path from a dataset defined using the juci#addDataset method. The value of the key referred by this path bounds as value of the control.
      • optionsList {Array}
        A string reference pointing to an array of numbers or strings or objects to display as options in the selectbox control. The reference path string should be part of any dataset defined using the juci#addDataset method.
    • data-juci {String}
      A string with value selectbox.