Data Input Formats
<ul>
<li name="Item 1" searchable="search me" selected="false">
<img src="path/image.png">
<ul>
<li name="Item 1.1" value="1.1" searchable="search me" selected="false">
<i class="fa faIcon"></i>
</li>
<li name="Item 1.2" searchable="search me" selected="false" data-img="path/image.png"><ul>
<li name="Item 1.2.1" value="1.2.1" searchable="search me" selected="false" data-icon="fa faIconClass"></li>
</ul></li>
</ul></li>
<li name="Item 2" value="2" searchable="search me" selected="false"></li>
</ul>
- String HTML should be input using the data-load-type="HTML"
- HTML node lists should be input using the data-load-type="liveHTML"
- Headers are specified by the <li> followed by <ul> tag
- Data is always stored in the <li> tag
- Data for headers
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)
- Data for items
- value: the value to be retrieved when the user selects this item
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)
- Importing Images and Icons
- When importing Images and Icons, Images always take precedence over icons
- The tag
and take precedence ovar the attributes "data-img" and "data-icon"
var array = [
{ // a header
"name": "Item1",
"searchable": "Item1",
"selected": false,
"icon": "fa faIconClass" // icon classes to be added to the item
"items": [
{ // list of items
"name": "Item1.1",
"searchable": "Item1.1",
"selected": false,
"value" : "1.1",
"image": "Path/Image2" // and image to be displayed
},
{ // item 1.2 is also a header
"name": "Item1.2",
"searchable": "Item1.2",
"selected": false,
"items" : [
{ // list of items for 1.2
"name": "Item1.2.1",
"searchable": "Item1.2.1",
"selected": false,
"value" : "1.2.1"
},
{
"name": "Item1.2.2",
"searchable": "Item1.2.2",
"selected": false,
"value" : "1.2.2"
}
]
} ]
}, ];
Example: Array = [ {Item1 [{Item1.1} , {Item1.2 [ {Item 1.2.1}] } ]}, {Item 2}]
Item 1 , Item 1.2 are headers
Item 1.1, Item 1.2 are items for header "Item 1"
Item 1.2.1 is the item for header "Item 1.2"
- Data is always stored in Items within the header
- Data for headers
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)
- Data for items
- value: the value to be retrieved when the user selects this item
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)
<data>
<item>
<name>Item 1</name>
<value>Item 1</value>
<searchable>Item 1</searchable>
<selected>false</selected>
<icon>fa faIconClasses</icon> // the classes to be applied to an icon
<item>
<name>Item 1.1</name>
<value>Item 1.1</value>
<searchable>Item 1.1</searchable>
<selected>false</selected>
<image>Path/ToImage3</image> // a path to an image for this item
</item>
<item>
<name>Item 1.2</name>
<searchable>Item 1.2</searchable>
<selected>false</selected>
<item>
<name>Item 1.2.1</name>
<value>Item 1.2.1</value>
<searchable>Item 1.2.1</searchable>
<selected>false</selected>
</item>
<item>
<name>Item 1.2.2</name>
<value>Item 1.2.2</value>
<searchable>Item 1.2.2</searchable>
<selected>false</selected>
</item>
</item>
</item>
<item>
<name>Item 2</name>
<value>Item 2</value>
<searchable>Item 2</searchable>
<selected>false</selected>
</item>
</data>
- Headers are evidenced by lack of a <value> tag and presence of <subitemX> tags under the <item> or <subitemY> tags.
- Data is always specified by the <value> tag
- Data for headers:
- value: The value retrieved when the item is selected
- name: The name as it will appear in the multiselect
- searchable: Additional text beyond the name that can be used to search for that specific item
- selected: Determines whether the item will be pre-selected (false by default)
- Data for items and subitems:
- value: The value retrieved when the item is selected
- name: The name as it will appear in the multiselect
- searchable: Additional text beyond the name that can be used to search for that specific item
- selected: Determines whether the item will be pre-selected (false by default)
'"h1", "value1", "searchable1", "selected1", "path/to/image", "icon classes"'\n
'"h6", "value2", "searchable2", "selected2", "path/to/image", "icon classes"'\n
'"h1.h2", "value3", "searchable3", "selected3", "path/to/image", "icon classes"'\n
'"h1.h4", "value4", "searchable4", "selected4", "path/to/image", "icon classes"'\n
'"h1.h2.h3", "value5", "searchable5", "selected5", "path/to/image", "icon classes"'\n
- The names of nested items must be formatted in the style of h1.h2.h3, h1.h2.h4, etc.
- A new line character is needed to separate the value of different headers/items.
- Data for headers/items:
- value: The value retrieved when the item is selected, inconsequential for headers
- name: The name as it will appear in the multiselect
- searchable: Additional text beyond the name that can be used to search for that specific item
- selected: Determines whether the item will be pre-selected (false by default)
- path/to/image: The file path to the location of the image for the icon
- icon classes: Determines the icon for the header/item via icon class
- An Image will always take precedence over and icon class (i.e. both will not be displayed)
var JSONDATA = [
{ // a header
"name": "Item1",
"searchable": "Item1",
"selected": false,
"items": [
{ // list of items
"name": "Item1.1",
"searchable": "Item1.1",
"selected": false,
"value" : "1.1",
"image": "Path/Image2" // and image to be displayed
},
{ // item 1.2 is also a header
"name": "Item1.2",
"searchable": "Item1.2",
"selected": false,
"items" : [
{ // list of items for 1.2
"name": "Item1.2.1",
"searchable": "Item1.2.1",
"selected": false,
"value" : "1.2.1"
},
{
"name": "Item1.2.2",
"searchable": "Item1.2.2",
"selected": false,
"value" : "1.2.2"
}
]
} ]
}, ];
Example: JSON = [ {Item1 [{Item1.1} , {Item1.2 [ {Item 1.2.1}] } ]}, {Item 2}]
Item 1 , Item 1.2 are headers
Item 1.1, Item 1.2 are items for header "Item 1"
Item 1.2.1 is the item for header "Item 1.2"
- Data is always stored in Items within the header
- Data for headers
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)
- Data for items
- value: the value to be retrieved when the user selects this item
- name: the name displayed for the user
- searchable: the text that can also be used to match this item
- selected: if this data item is pre-select (defaults to false)