aitchnyu aitchnyu - 1 year ago 196
React JSX Question

Autocomplete with React components

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

enter image description here

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download