react-autocomplete (combobox)
WAI-ARIA accessible React autocomplete component (combobox).
Installation
npm install react-autocomplete
WIP
This is not production ready, but I welcome use-cases opened in the issues :)
Demo
http://rackt.github.io/react-autocomplete/example/
Usage
var Autocomplete = require('react-autocomplete');
// its actually called a combobox, but noboby searches for that
var Combobox = Autocomplete.Combobox;
var Option = Autocomplete.Option;
var comboboxinItUp = (
// Just like <select><option/></select>, this component is a
// composite component. This gives you complete control over
// What is displayed inside the <Option>s as well as allowing
// you to render whatever you want inside, like a "no results"
// message that isn't interactive like the <Options> are.
// Start with the <Combobox/> and give it some handlers.
<Combobox
onInput={handleInput}
onSelect={handleSelect}
autocomplete="both"
>
// `onInput` is called when the user is typing, it gets passed the
// value from the input. This is your chance to filter the Options
// and redraw. More realistically, you'd make a request to get data
// and then redraw when it lands.
//
// `onSelect` is called when the user makes a selection, you probably
// want to reset the Options to your full dataset again, or maybe
// deal with the value and then clear it out if this is used to
// populate a list.
//
// `autocomplete` defaults to 'both'. 'inline' will autocomplete the
// first matched Option into the input value, 'list' will display a
// list of choices, and of course, both does both.
// When this option is selected, `onSelect` will be called with the
// value `"foo"`.
<Option value="foo">Foo</Option>
// `label` is the text to display in the input when the Option is
// selected. It defaults to the content of the Option just like a
// real <option>. (Maybe the value should too, now that I'm writing
// this, but it doesn't yet)
<Option value="bar" label="not bar at all">Bar</Option>
</Combobox>
);This is not realistic code, check out the examples directory for a real implementation.