Autocomplete with React components

Question

I want a autosuggest workflow like below. Instead of displaying numeric ID, say 123 in a text field, I want to show custom information.

While I can do the rest with React, I still need to do autocomplete. I have two requirements:

1. When selected, provide a callback with rich data {id: 123, title:"Prince Hall", info:"123 Foo St"}
2. Have custom rendering that allows me to reuse JSX templates

JQueryUI and Twitter autocompletes have both features. But their item rendering takes is string based, but I want to reuse JSX templates which are virtual-dom based. I dont want to duplicate/hardcode JSX templates with string templates.

Answer 1

Check out react-select. It is simple, beautiful and currently has the most Github stars. Live demo here.

Answer 2

React-Autosuggest is a component that meets the requirements. It has custom rendering that works natively with React elements.

We can make it handle JS objects instead of plain strings.

1. the onSuggestionSelected props is a callback to get the selected suggestion
2. suggestionRenderer method takes suggestion and returns React markup

http://react-autosuggest.js.org/