Skip to content

Data Input Formats

Jump to bottom
N3rdizm edited this page Mar 21, 2018 · 30 revisions

1. Live HTML/JQuery node lists

Input should be formatted like so:

<ul>
    <li name="Item 1" searchable="search me" selected="false"><ul>
        <li name="Item 1.1" value="1.1" searchable="search me" selected="false"></li>
        <li name="Item 1.2" searchable="search me" selected="false"><ul>
            <li name="Item 1.2.1" value="1.2.1" searchable="search me" selected="false"></li>    
        </ul></li>
    </ul></li>
    <li name="Item 2" value="2" searchable="search me" selected="false"></li>  
</ul>

This can be input in either pure html, or a JQuery html list

Things to keep in mind:

  1. Headers are specified by the <li> followed by <ul> tag
  2. Data is always stored in the <li> tag
  3. 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)
  4. 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,
                    "items": [
                        { // list of items 
                            "name": "Item1.1",
                            "searchable": "Item1.1",
                            "selected": false,
                            "value" : "1.1"
                        },
                        { // 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"

  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)

3. HTML input

Input should be formatted like so:

<ul>
<li name="Item 1" searchable="search me"><ul>
        <li name="Item 1.1" value="1.1" searchable="search me"></li>
        <li name="Item 1.2" searchable="search me"><ul>
            <li name="Item 1.2.1" value="1.2.1" searchable="search me"></li>    
        </ul></li>
    </ul></li>
    <li name="Item 2" value="2" searchable="search me" selected></li>  
</ul>

Things to keep in mind:

  1. Headers are specified by the <li> followed by <ul> tag
  2. Data is always stored in the <li> tag
  3. 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)
  4. 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>
          <subitem1>
                  <name>Item 1.1</name>
                  <value>Item 1.1</value>
                  <searchable>Item 1.1</searchable>
                  <selected>false</selected>
          </subitem1>
          <subitem1>
                  <name>Item 1.2</name>
                  <value>Item 1.2</value>
                  <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 <subitem> tags under the <item> tag.
  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)
Clone this wiki locally