5

In an application using material-ui v1.0 (aka material-ui-next), how can I create a chip input field with autocomplete options? (I.e. a text box that, when you start typing, produces a list of available options, and when you click one of those options changes the option to a chip -- somewhat like the tag entry box on stack overflow)

Everything I've found so far suggests using https://github.com/TeamWertarbyte/material-ui-chip-input but this library is using the older material-ui v0.20 and while they're in the process of porting to material-ui v1.0 the branch for this doesn't support autocomplete yet. Is there another way of doing this?

Jules
  • 14,841
  • 9
  • 83
  • 130
  • Material-ui-chip- has been ported to Material-ui v1.0 (Next): https://github.com/TeamWertarbyte/material-ui-chip-input/tree/next – rubelux Apr 11 '18 at 10:13

2 Answers2

3

Orginal React Selectv2 A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

https://react-select.com/home#getting-started

Fatih Hayrioğlu
  • 3,458
  • 1
  • 26
  • 46
2

If you can use a plugin then i would suggest you to go with : React Select Plus

github

Yash Thakur
  • 1,172
  • 7
  • 14
  • Hmm... I've used React-Select in a previous project, but hadn't seen this fork. Any idea how configurable it is? It doesn't really fit in with Material style, but if it can be changed easily enough maybe that's not a problem. – Jules Feb 26 '18 at 18:16
  • I have used it with bootstrap and you can override its css to have your own css. And this one is the upgraded fork of "react-select" with enhanced features (chip from select in one of them). It is pretty much highly configurable and will suit your needs. – Yash Thakur Feb 26 '18 at 18:20
  • Yes, it looks like in absence of an existing material-based implementation, this is almost certainly the best way of doing it. Thanks! – Jules Feb 26 '18 at 18:47