React Async Autocomplete
This autocompleter will display options and react to keypress (up, down, enter, esc). Inspired in React Autocomplete, but designed for a simplified workflow where requests are expected to be asynchronous (synchronous is supported, but should be less common) and will display a loading icon.
Check the demo here.
Use
; // render one item on the listconst MyItemView = { return <div className="user-data"> <div>itemid</div> <div>itemname</div> </div> ; } Component { super; thisstate = selected: undefined thisonChange = thisonChange; thisonSelect = thisonSelect; } // invoked when the user types something. A delay of 200ms is // already provided to avoid DDoS'ing your own servers { // you would normally do here your server access } // called when the user clicks an option or hits enter { this; // the returned value will be inserted into the input field. // Use an empty String to reset the field return user; } { return <div> <Autocomplete ref="autocomplete" renderItem=MyItemView onChange=thisonChange onSelect=thisonSelect /> </div> } ;
Develop
npm i # to develop npm run watch
There is no build
step. The source is a single file in lib/index.js
, published "as is".