Datalists and Input

Dash Python
1

Hi All,

I’m trying to use the ‘list’ argument for the dash ‘Input’ component. The ‘help’ information shows the below…

| - list (string; optional): Identifies a list of pre-defined options to suggest to the user.
| The value must be the id of a element in the same document.
| The browser displays only options that are valid values for this
| input element.
| This attribute is ignored when the type attribute’s value is
| hidden, checkbox, radio, file, or a button type.

Therefore, I’m trying to add a Datalist element as well to house the ‘suggestions’ to my input component. However, I’m unable to get my input component to show any suggestions. My code is below… this actually allows me to use the input component to control many other components but without suggestions.

    html.Datalist(id='list-data',
                  children=list(numpy.unique(df['DATA']))),
    
    html.Div([
        dcc.Input(id='list-input',
                  placeholder='Enter a CUSIP...',
                  type='text',
                  value='ABC',
                  list='list-data'
        )
    ]),

I couldn’t find any examples in the various galleries. I also tried setting the list within Datalist to ‘values’ or ‘options’ like you might in a Dropdown component but its not a valid argument. Has anyone gotten this to work so far?

I’m guessing its a misunderstanding on my end with how to interact with the html reach components.

Thanks!

2

I haven’t tried this myself, but it looks like Datalist needs to contain a set of Option components. Here’s an example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Note that you could have a similar effect with the dcc.Dropdown component: https://plot.ly/dash/dash-core-components/dropdown

3

Thanks for the reply Chris. I actually was using that example you posted as a template but when I set options=[{‘label’:i, ‘value’:i} for i in numpy.unique(df[‘DATA’])] I get the following error within dash\development\base_component.py

Exception: Unexpected keyword argument ‘options’. Allowed argurments: accessKey, children, className, contentEditable, contextMenu, dir, draggable, hidden, id, lang, n_clicks, spellCheck, style, tabIndex, title

Agreed on using a Dropdown component but chose not to because I want my user to be able to type any input without being constrained to a list of options. My understanding is that Dropdown gives a finite list while using a Datalist with Input component simply gives a suggested value as the user types.

4

Right, so from that example, I belive that the markup should look like:

html.Input(list="browsers"),
html.Datalist(id="browsers", children=[
   html.Option(value="chrome"),
   html.Option(value="firefox"),
   html.Option(value="internet explorer"),
])
1 Like
5

Makes sense. Seems like we should add this option to the dcc.Dropdown component.

6

Also, just a heads up, it looks like the Datalist features are not supported in Safari and may not work in IE or Edge: http://caniuse.com/#search=datalist

7

This works! I was close… just needed the html.Option(value=…) portion… sigh

A more detailed explanation of my use-case:
The Input component drives three tables, two of which will always populate with some set of information. The third table is a smaller list of the same key values so I want the Datalist to suggest in the Input component key values that are in the third table but not restrict it to only that set of keys. That way if the user wishes they can Input a key for the first two tables while the third returns nothing.

Thanks for the heads up on browsers, I had seen this and definitely need to consider it as I roll out to any users.

8

It didn’t work for me unfortunately. I got one of three options I supplied in the datalist from my dropdown list. Please advise.

html.Datalist(id="tickerlist", children=[
        html.Option(value="AMZN"),
        html.Option(value="GOOG"),
        html.Option(value="BAC"),
    ]),
    html.P('Ticker Symbol'),
    dcc.Input(
        id='ticker-input',
        name='Ticker Symbol',
        list='tickerlist',
        placeholder='Enter a value...',
        type='text',
        value='C'
    ),

Capture|278x166Capture

9

Try to remove the “C” from value in dcc.Input?

10

Worked! Thank you! It is “C” that is filtering other symbols than “BAC” in my list…

11

Hi @chriddyp. I would like to set the 'html.Option(value=‘chrome’) tags with strings i have stored in a separate list. Is their a way to loop through a list to set these tags inside the children property of the html.Datalist component?

12

Hi @andrewmarco
assuming your list is outside the app.layout section:

colors = ['blue', 'yellow', 'green']

this is how you can loop through it inside the html.Datalist component:

    html.Datalist(id='browser', children=[
            html.Option(value=x)
            for x in colors
        ]
    )
13

if you have a long list of option values you can do something like this:

html.Div([
        dcc.Input(
            id="search_ingredient", type="search",
            autoComplete=True, autoFocus=True,
            list="food_names", placeholder=food_names_arr[0]
        ),
    ]),

    html.Datalist(
        id="food_names", children=[
            html.Option(value=food) for food in food_names_arr
        ]
    ),

where food_names_arr is a list