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:

When selected, provide a callback with rich data {id: 123, title:"Prince Hall", info:"123 Foo St"}
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.

could you please add the code you've started with and what's not working? As written, this question is too broad, it's asking to select a component for you, and then write the code. — WiredPrairie
– WiredPrairie, Commented Aug 5, 2015 at 12:46
@WiredPrairie, yes I had a feeling that this question is a hard to answer, recommendation question. I started with JqueryUI's and Twitter autocomplete and they had custom rendering, but with string templates only; and using React's virtual dom with string rendering was an uncrackable problem. Thats why I asked if there is any autocomplete that can play well with React rendering. Sorry the wording was too lazy. — Jesvin Jose
– Jesvin Jose, Commented Aug 5, 2015 at 13:17

Erwin Mayer · Accepted Answer · 2016-10-30 04:28:03Z

15

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

answered Oct 30, 2016 at 4:28

Erwin Mayer

18.8k9 gold badges96 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesvin Jose · Accepted Answer · 2015-08-05 13:27:13Z

5

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.

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

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

edited Aug 5, 2015 at 13:27

answered Aug 5, 2015 at 13:08

Jesvin Jose

23.2k34 gold badges117 silver badges211 bronze badges

Comments

Ali Tourani · Accepted Answer · 2019-05-11 11:15:25Z

0

Another powerful Auto-Complete/Auto-Suggest module is 'downshift' which has a wide variety of props for better customization. Different from react-select which opens as a select-box, downshift is a textbox which unhides a suggestion list of words as its value changes.

answered May 11, 2019 at 11:15

Ali Tourani

1,2673 gold badges23 silver badges34 bronze badges

Collectives™ on Stack Overflow

Autocomplete with React components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related