Skip to content

Latest commit

 

History

History
113 lines (94 loc) · 5.56 KB

README.md

File metadata and controls

113 lines (94 loc) · 5.56 KB
Raw
permalink title
pat/select2/
Select2

Select2 pattern.

Show a widget which enhances dropdown selections with automatic suggestions, search, and tagging functionality.

Configuration

Option Type Default Description
separator string ',' Analagous to the separator constructor parameter from Select2. Defines a custom separator used to distinguish the tag values. Ex: a value of ";" will allow tags and initialValues to have values separated by ";" instead of the default ",".
initialValues string null This can be a json encoded string, or a list of id:text values. Ex: Red:The Color Red,Orange:The Color Orange This is used inside the initSelection method, if AJAX options are NOT set.
vocabularyUrl string null This is a URL to a JSON-formatted file used to populate the list.
allowNewItems string true All new items to be entered into the widget.
onSelecting string or function null Name of global function or function to call when value is selecting.
onSelected string or function null ame of global function or function to call when value has been selected.
onDeselecting string or function null Name of global function or function to call when value is deselecting.
onDeselected string or function null Name of global function or function to call when value has been deselected.

For more options on select2 go to http://ivaynberg.github.io/select2/#documentation

Examples

Autocomplete with search (single select)

Acholi Afrikaans Akan Albanian Amharic Arabic Ashante Asl Assyrian Azerbaijani Azeri 
<select class="pat-select2" data-pat-select2="width:20em;">
    <option value="Acholi">Acholi</option>
    <option value="Afrikaans">Afrikaans</option>
    <option value="Akan">Akan</option>
    <option value="Albanian">Albanian</option>
    <option value="Amharic">Amharic</option>
    <option value="Arabic">Arabic</option>
    <option value="Ashante">Ashante</option>
    <option value="Asl">Asl</option>
    <option value="Assyrian">Assyrian</option>
    <option value="Azerbaijani">Azerbaijani</option>
    <option value="Azeri">Azeri</option>
</select>

Tagging

<input
    class="pat-select2"
    type="text"
    data-pat-select2="separator:,;
                      tags:Red,Yellow,Green,Orange,Purple;
                      width:20em;
                      initialValues:Red:The Color Red,Orange:The Color Orange"
    value="Red,Orange"
/>

Orderable tags

<input
    class="pat-select2"
    type="text"
    data-pat-select2="orderable:true;
                      tags:Red,Yellow,Green;
                      width:20em"
/>

AJAX tags

<input
    class="pat-select2"
    type="hidden"
    data-pat-select2="placeholder:Search for a Value;
                      vocabularyUrl:select2-test.json;
                      width:20em"
/>