List, Long Multi Value

Use the Long List - Single Selection control when you need to select an item from a large number of options. There are two states for this control

Go To:
View Guidelines

Examples

Presentation State

Use the class .truncate to init the jquery.truncator plugin.

  • Long List Option 2
  • Long List Option 4
  • Long List Option 5
  • Long List Option 7
  • Long List Option 22
  • Long List Option 41
  • Long List Option 51
  • Long List Option 71
  • Long List Option 62
  • Long List Option 64
  • Long List Option 65
  • Long List Option 67

Code Snippet




    
   
  • Long List Option 2
    • 
   ...
   
  • Long List Option 7
    •

Read Only State

Add the disabled attribute to the select to create a read-only mode component.

Code Snippet

Editable State

Code Snippet

Pezzi Component

Component input parameters

Parameter Values Default Functionality
container String N/A jQuery selector where component will be rendered
id String N/A Class ID of element. This is required.
dataset Array of Objects [{id: 1, text: 'Option 1'}, ...] these items will be displayed in selector
val Array of keys [] Initial selection. If not `multiple` then will use first element. Provide a list of ids, no need to provide whole objects as provided to `dataSet`
styleWidth String 100% inline style for select
enabled Boolean true Enable/disable the input
allowClear Boolean true Allow clear for single select
multiple Boolean false Enable/Disable multiple selection
placeholder String Make a selection Placeholder text
onSelection function Callback for selection event
ajax object Ajax support, see documentation of Select2 3.5.2
ajaxDefault Array of Objects Initial selection. If not `multiple` then will use first element. Provide a list of object (representing what ajax would return)
initSelection Array default implementation returns ajaxDefault objects initSelection support, see documentation of Select2 3.5.2

Playground With Examples