Data Input Formats

1. HTML String / JQuery Node / HTML Elements

Input should be formatted like so:

<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" img="path/image.png"><ul>
            <li name="Item 1.2.1" value="1.2.1" searchable="search me" selected="false" icon="fa faIconClass"></li>    
        </ul></li>
    </ul></li>
    <li name="Item 2" value="2" searchable="search me" selected="false"></li>  
</ul>

This can be input in either and HTML string, pure HTML elements, or a JQuery HTML list

Things to keep in mind:

1. String HTML should be input using the data-load-type="HTML"
2. HTML node lists should be input using the data-load-type="liveHTML"
3. Headers are specified by the <li> followed by <ul> tag
4. Data is always stored in the <li> tag
5. 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)
6. 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)

2. Array Input Data

Format Should be like :

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",
                            "img": "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}]

Things to keep in mind:

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"

1. Data is always stored in Items within the header
2. 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)
3. 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)

4. XML Input

Input should be formatted along the lines of the following:

<data>
     <item>
          <name>Item 1</name>
          <searchable>Item 1</searchable>
          <selected>false</selected>
          <icon>fa faIconClasses</icon> // the classes to be applied to an icon
          <subitem1>
                  <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
          </subitem1>
          <subitem1>
                  <name>Item 1.2</name>
                  <searchable>Item 1.2</searchable>
                  <selected>false</selected>
                  <subitem2>
                          <name>Item 1.2.1</name>
                          <value>Item 1.2.1</value>
                          <searchable>Item 1.2.1</searchable>
                          <selected>false</selected>
                  </subitem2>
                  <subitem2>
                          <name>Item 1.2.2</name>
                          <value>Item 1.2.2</value>
                          <searchable>Item 1.2.2</searchable>
                          <selected>false</selected>
                  </subitem2>
          </subitem1>
     </item>
     <item>
          <name>Item 2</name>
          <value>Item 2</value>
          <searchable>Item 2</searchable>
          <selected>false</selected>
     </item>
</data>

Things to keep in mind:

1. Headers are evidenced by lack of a <value> tag and presence of <subitemX> tags under the <item> or <subitemY> tags.
2. Data is always specified by the <value> tag
3. Items under headers are specified by <subitem> tags with a number corresponding to the level of indentation of the subitem, i.e. <subitem1> would mean that item has one level of indentation under the header.
4. Data 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)
5. 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)

---

When Importing Images/Icons

• An Image will always take precedence over and icon class (i.e. both will not be displayed)