UI-SELECT (UNDER CONSTRUCTION)

Simple and easy to use "Select", "Multiselect" and "Combobox" component

HTML

  
  <!-- generate a select -->
  <ui-select name='my-select'>
    <option selected value='value1'>text1</option>
    <option value='value2'>text2</option>
    <option value='value3'>text3</option>
  <ui-select>
  
  <!-- generate a combobox -->
  <ui-combo name='my-combo' src='/url/to/extra/option' value='initialValue' text='initialText' not-empty>
    <option selected value='value1'>text1</option>
    <option value='value2'>text1</option>
    <option value='value3'>text1</option>
    <option value='value4'>text1</option>
  </ui-combo>
  
  <!-- generate a multiselect -->
  <ui-multiselect name='my-multiselect' src='/url/to/extra/option' value='initialValue' text='initialText'>
    <option selected value='value1'>text1</option>
    <option value='value2'>text1</option>
    <option value='value3'>text1</option>
    <option value='value4'>text1</option>
  </ui-multiselect>
  

GLOBAL ATTRIBUTES

Attribute	Description
src	Url that will be call by ajax to get more options	src='/url/to/data?filter=%filter%'
src-text	Url that could be use to initialise text attribute of the initial value	src='/url/to/text/data?filter=%filter%'
value	initial value
text	initial text
name	Used for form submission
onchange	handle change event
autosort	automatically sort options shown

MULTISELECT ATTRIBUTES

Attribute	Description
tags	Allow user to create items	Setting only "tags" attribute will set the value the same as the text. If a value is setted into the attribute, it will be used as the default value
tokenSeparators

COMBO ATTRIBUTES

Attribute	Description
not-empty	Bring back last value if field is empty

SRC URL RESPONSE

SIMPLE USE

  [
    {"text":"some text", "value":"some value"},
    //...
  ]

INCLUDING A "SHOW MORE" OPTION

To add a "show more" options for the users, you can return an object with a count and results property. As long the count is lower than the total number of item shown, an item show more will be displayed at the bottom of the list. This will add more=1 as a get parameter to the src url, the value of the parameter will be the number of times the show more was clicked (for the current research if your are not using the ui-select).

The src url should not return the same results as before but only the next results.

  /* /some/url?search=someText */
  {
    "count":1337,
    "results":[
      {"text":"text 1", "value":"value 1"},
      {"text":"text 2", "value":"value 2"},
    ]
  }
  /* /some/url?search=someText&more=1 */
  {
    "count":1337,
    "results":[
      {"text":"text 3", "value":"value 3"},
      {"text":"text 4", "value":"value 4"},
    ]
  }

DISABLING A DROPDOWN ELEMENT

To disable an element coming from an url, simple add the attribute "disabled":"1" in the definition. To disable an element coming from option html tag, simply add the disabled attribute.

CSS VARIABLES

Name	Description	default	example
--rgb-outline	rgb params separated by comma representing the color of the outline		--rgb-outline: 0, 170, 255
--rgb-outline-hover	rgb params separated by comma representing the color of the outline(minus shadow) on hover, if not specified, it will use the outline color		--rgb-outline-hover: 0, 0, 0
--ui-select-background-menu-hover	rgb params separated by comma representing the color of the outline(minus shadow) on hover, if not specified, it will use the outline color	#e2e2e2
--ui-select-background-menu-selected	rgb params separated by comma representing the color of the outline(minus shadow) on hover, if not specified, it will use the outline color	--ui-select-background-menu-hover
--ui-select-maximum-menu-height		250px
--ui-select-font-family		Roboto