Single ddc.input multiple values (not dropdown)

Dash Python
1

Hi there,

I am using dash for a web app, and I am currently trying to configure an input box which holds a list of items. This list is passed into a package which runs searches on those values individually, and can search up to 5 at a time. These values are free text - they cannot be limited to a list for dropdowns as there are infinite items that can be searched - so dcc.Dropdown cannot be used here, but they have to be 5 items at most. These 5 items are not limited in terms of character, so having character limits would not work either.

I have tried to find a solution in the docs and google searches, but nothing has come up. I would like to ideally be able to have a user enter an item in the search box, and after entering a separator, such as a comma, it would add that item as one item to the current search list length and incriment it by 1.

E.g ‘Google’, would be 1 item, ‘Netflix’ another, ‘Facebook’, another, etc up to a specified limit. This functionality works well with the dropdown component, but I haven’t seen one for a free text area.

My current solution is to have 5 separate entry fields, but this is not very elegant and needs further conditionals and deal with non-entries if all 5 haven’t been used.

So I would like to ask, is there a way to make a single input field with free texts, that has each input separated by a comma and limit the amount of input items, rather than limiting the characters?

Thanks.

2

Hi @ogola89
Not clear to me your problem, but perhaps you need something like a form.
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/form/

3

Hi Eduardo,

Thanks for your reply. However, it is not quite what I am looking for.

What I mean is a single input box that can take string values of different lengths, each one counted as one input. This example is from the dropdown documentation and has 3 inputs - ‘New York’ is one, ‘Montreal’ is another and ‘San Francisco’ is another:

image
image787×56 3 KB

However, I need a free text entry rather than a drop down that has pre-defined values.

I hope that’s clear?

4

Hey @ogola89

I think text area could be a solution, the user can enter each option in different rows and then you can work out with the taxi entered using a callback.
https://dash.plotly.com/dash-core-components/textarea