This implementation is almost entirely derived from rpflorence/react-autocomplete, but has changed enough to earn its own repo. But it's totally a WIP and shouldn't be used for production yet.
npm install react-combobox
This is not production ready, but I welcome use-cases opened in the issues :)
var Autocomplete = ;// its actually called a combobox, but noboby searches for thatvar Combobox = AutocompleteCombobox;var Option = AutocompleteOption;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.<ComboboxonInput=handleInputonSelect=handleSelectautocomplete="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.