Selectit

var options = {
    searchable: true,
    labelField: 'name',
    valueField: 'code',
    data: [
      { name: 'Afghanistan', code: 'AF' },
      { name: 'Åland Islands', code: 'AX' },
      { name: 'Albania', code: 'AL' },
      { name: 'Algeria', code: 'DZ' },
      { name: 'American Samoa', code: 'AS' },
      { name: 'AndorrA', code: 'AD' },
      { name: 'Angola', code: 'AO' },
      { name: 'Zambia', code: 'ZM' },
      { name: 'Zimbabwe', code: 'ZW' }
    ]
  };
  new SelectIt(document.getElementById("selector"), options).on('selected', (items) => {
    console.log('Items', items)
  });

Preselected options

new SelectIt(document.getElementById("preselect"), {
    searchable: true,
    data: [
      { label: 'JavaScript (React.js and Node.js)', value: 1 },
      { label: 'Python', value: 2 },
      { label: 'HTML', value: 3 },
      { label: 'CSS', value: 4 },
      { label: 'C++', value: 5 },
      { label: 'TypeScript', value: 6 },
      { label: 'Rust', value: 7 },
      { label: 'Scheme', value: 8 },
      { label: 'Java ', value: 8 },
      { label: 'Kotlin', value: 10 },
      { label: 'C#', value: 11 },
      { label: 'Perl', value: 12 },
      { label: 'PHP', value: 13 },
      { label: 'Scala ', value: 14 },
      { label: 'Swift', value: 15 },
      { label: 'MATLAB', value: 16 },
      { label: 'SQL', value: 17 },
      { label: 'R Programming Language', value: 18 },
      { label: 'Golang (Go)', value: 19 },
      { label: 'Ruby', value: 20 },
    ],
    selected: [13, 17, 19, 20],
    name: 'preselected'
  })

Translation

new SelectIt(document.getElementById("preselect"), {
  searchable: true,
  data: [
    { label: 'JavaScript (React.js and Node.js)', value: 1 },
    { label: 'Python', value: 2 },
    { label: 'HTML', value: 3 },
    { label: 'CSS', value: 4 },
    { label: 'C++', value: 5 },
    { label: 'TypeScript', value: 6 },
    { label: 'Rust', value: 7 },
    { label: 'Scheme', value: 8 },
    { label: 'Java ', value: 8 },
    { label: 'Kotlin', value: 10 },
    { label: 'C#', value: 11 },
    { label: 'Perl', value: 12 },
    { label: 'PHP', value: 13 },
    { label: 'Scala ', value: 14 },
    { label: 'Swift', value: 15 },
    { label: 'MATLAB', value: 16 },
    { label: 'SQL', value: 17 },
    { label: 'R Programming Language', value: 18 },
    { label: 'Golang (Go)', value: 19 },
    { label: 'Ruby', value: 20 },
  ],
  selected: [13, 17, 19, 20],
  name: 'preselected',
  translation: {
    selectAll: 'Select all',
    deselectAll: 'Deselect all',
    search: 'Search'
  }
})

Config options

{
  height: 250,
  labelField: 'label',
  valueField: 'value',
  selected: undefined,
  name: 'selectit-input',
  translation: {
    selectAll: 'Select all',
    deselectAll: 'Deselect all',
    search: 'Search'
  }
}

.on() method:

When an option selected all selected options will be passed this method.

Hidden input

All selected values will be passed to a hidden input with name selectit-input. You can change this inputs name with name config option

Translation

You can pass translation object.

{
  translation: {
    selectAll: 'Select all',
    deselectAll: 'Deselect all',
    search: 'Search'
  }
}