Combobox Navigation
Attach combobox navigation behavior to <input>
or <textarea>
.
Installation
$ npm install @github/combobox-nav
Usage
HTML
<label>
Robot
<input id="robot-input" aria-owns="list-id" role="combobox" type="text">
</label>
<ul role="listbox" id="list-id">
<li id="baymax" role="option">Baymax</li>
<li><del>BB-8</del></li>
<li id="hubot" role="option">Hubot</li>
<li id="r2-d2" role="option">R2-D2</li>
</ul>
JS
import {clearSelection, install, navigate, uninstall} from '@github/combobox-nav'
const input = document.querySelector('#robot-input')
const list = document.querySelector('#list-id')
install(input, list)
navigate(input, list, 1)
clearSelection(input, list)
uninstall(input, list)
Events
A bubbling combobox-commit
event is fired on the list element when an option is selected via keyboard or click.
For example, autocomplete when an option is selected:
list.addEventListener('combobox-commit', function(event) {
console.log('Element selected: ', event.target)
})
Development
npm install
npm test