jQuery ComboBox Templates

The ShieldUI ComboBox widget allows you to define custom templates which will be rendered into each select item, underlying list item’s value and input’s text. The templates are passed to the textTemplate, valueTemplate or inputTemplate options and can be string or function - which returns string.

• String template

The string template can contain html elements which will be inserted into each optional item. The template can contain formatted string parameters which will be replaced with the data item’s values:

<input id="combo" ></input>

<script type="text/javascript">

    $(function () {
        $("#combo").shieldComboBox({
            dataSource: {
			    data: countries
		    },
		    textTemplate: "{name}",
		    valueTemplate: "{code}",
            inputTemplate: "{name}"
       });
    });

</script>

• Function as template

By assigning function to the templates you can have full power over the returned string and you can return different templates based on underlying data item:

<input id="combo" ></input>

<script type="text/javascript">

    $(function () {
        $("#combo").shieldComboBox({
            dataSource: {
			    data: countries
		    },
		    textTemplate: function(item) {
			    return item.name;
		    },
		    valueTemplate: function(item) {
			    return item.code;
		    },
            inputTemplate: function(item) {
			    return item.name;
		    }
       });
    });

</script>

Live example of function as template you can find in the following ComboBox demo.