dequelabs / combobo

Accessible combobox
https://dequelabs.github.io/combobo/demo/
MIT License
49 stars 13 forks source link

Combobo

Accessible combobox module

Installation

$ npm install combobo

Usage

In the browser

Just include combobo.js (window.Combobo will be set)

<body>
  <script src="https://github.com/dequelabs/combobo/raw/master/node_modules/combobo/dist/combobo.js"></script>
  <script>
    var combobo = new Combobo();
  </script>
</body>

CDN (unpkg)

<script src="https://unpkg.com/combobo"></script>

With browserify/webpack/any bundler

import Combobo from 'combobo'; // or require('combobo')

const combobo = new Combobo();

Options

Example Combobo call with options

var combobo = new Combobo({
  input: '.combobox',
  list: '.listbox',
  options: '.option', // qualified within `list`
  groups: null, // qualified within `list`
  openClass: 'open',
  activeClass: 'active',
  selectedClass: 'selected',
  useLiveRegion: true,
  multiselect: false,
  noResultsText: null,
  selectionValue: (selecteds) => selecteds.map((s) => s.innerText.trim()).join(' - '),
  optionValue: 'underline', // wrap the matched portion of the option (if applicable) in a span with class "underline"
  announcement: {
    count: (n) => `${n} options available`,
    selected: 'Selected.'
  },
  filter: 'contains' // 'starts-with', 'equals', or funk,
  autoFilter: true // 'true' or 'false' default true
});

Events

Add an event listener with .on, remove event listener with .off (see example below)

var combobo = new Combobo();

combobo
  .on('change', function () {
    console.log('stuff has changed and stuff');
  })
  .on('selection', function () {
    console.log('selection made!');
  });

Methods

Example usage

// move 5 options forward and select the option
combobo
  .goTo(combobo.getOptIndex() + 5)
  .select();

// adds an option to the dropdown list
combobo
  .setOptions(`<li>Some Option</li>`);