Feature request: Pass an array of suggested tags.

[Oscar Gonzalez]

It would be nice to be able to pass-in an array of tags that can be chosen. When typing, the component would show a list of suggestions from the array that match what the user has typed. Finally, a property that tells the component to only accept tags from the list.

Here's an outline of what I'm thinking:

• props.onSuggest Function that takes the input value and returns an array of suggestions. When the user types, call this function and use the result in a call torenderSuggestions
• props.addKeys should complete the suggestion
• and should select a suggestions from the list
• props.onlySuggested The user can only choose from 'props.suggestions'
• props.suggestions can be 'updateable'.
• props.renderSuggestions - function that takes in the list of suggestions and returns jsx

I haven't looked into what it will take to implement this, but if there is interest, then I can get to work on it.

Let me know what you think and if it is possible...or if there is already a way to do this.

Thanks so much! 🍰

[Barry Staes]

Those options sound fine to me..

About the UI.. ofcourse there are many ways to design this. Some would like to show a vertical list of 10 suggestions, others would like a bigger cloud. There is no "best way" i think .. even in my own applications i keep experimenting with the tag suggestions.

Therefor; why not allowing the user to supply the suggestion component, or an onRenderSuggestions callback to output JSX. You could still have a simple default implementation ofcourse, so it all works out of the box.

update: perhaps you might as well let the user do the filtering in an onSuggest callback. Some people might want to prioritize some tags, include soundex results when nothing was found, or provide a better suggestion.

[Oscar Gonzalez]

Thanks for the feedback, @barrystaes. I updated my post. onSuggest and renderSuggestions is probably the most-flexible way to make this work.

[Ola]

Thank you you @oscar-g, this is a really well thought out suggestion, let me fist just update the component to work with React 15.0 and we can think of a way of implementing auto completion.

[Oscar Gonzalez]

That's good to hear, @olahol. Let me know if you need any contributions on the update to React 15.

[Ola]

I've made a first draft of suggestions now on branch autocomplete. Can you check it out @oscar-g? There is an example in example/suggest.html.

[Guillaume Boddaert]

I'm in a need of such a solution, is there any planned of integrating this to master branch ?

Edit: I'm currently testing it, but it don't seems to be very asynchronous call compliant. Where should I plug my async call for new suggestions ?

[Ola]

Hello @Guibod, instead of building my own auto suggest feature I'm now looking into making the component compatible with https://github.com/moroshko/react-autosuggest , some seem to already have made it work moroshko/react-autosuggest#167

[Gabin Aureche]

@olahol I think leaving room to add a component that's 100% focused on getting the autocomplete right is a good idea. I needed to add an autocomplete to react-tagsinput so I took a look at the whole thing and thought I'd post my findings here for anyone who's interested in doing the same.

So the idea of using react-autosuggest with react-tagsinput is to pass it to the renderInput option. There's then close to everything you may need to interface properly with the component. The only issue is that you can't provide a custom input to react-autosuggest so you can't use things like react-input-autosize. react-autosuggest's input is actually another component called react-autowhatever and that's where you'll find the input's rendering mechanism. There's a waiting pull request in this repository adding the renderInput option that has been posted in May 2016 (this PR relies on another PR in another repository).

[Ola]

Thanks @zhouzi for posting your findings, I am going to take some time to look into a good solution for auto suggestion because at the moment it's not great, maybe write my own minimal auto suggestion component.

[Gabin Aureche]

Yeah, in the end that's what I ended up doing: re-building my own autocomplete suggestion as using react-autosuggest wasn't as easy as expected. So you probably better do that too :) I'll eventually open source what I did though so maybe we can work on it together ^^

[Johan Horvius]

Any news on this topic? SInce that PR by @zhouzi got closed?

[Gabin Aureche]

I submitted a few PRs to make it easier but the feature's not implemented yet AFAIK. I'll have a look and see if I can create a PR with what I built :)