Up-to-date example of dcc.Input with html.DataList, please!

Dash Python
1

I want to a dcc.Input that offers suggestions, like this:

dbc.Row(
                        [
                        html.DataList(id='vu_add_query_suggestions',children=list(df[column].apply(lambda x: html.Option(value=x)).values)),
                        dcc.Input(id='vu_add_query',
                                    list='vu_add_query_suggestions',
                                    debounce=True,
                                    style={'width':'70%'}
                        )
                    ]
                    )

I get the following error:
AttributeError: module 'dash_html_components' has no attribute 'DataList'
I am using the following module:
dash-html-components-1.1.2

I am guessing that this has to do with the versions of my various dash-modules. I tried updating dash-html-components to the latest version but then my app stopped working altogether with the following error message:

Traceback (most recent call last):
  File "application.py", line 90, in <module>
    import dash_html_components as html
  File "/Users/davidnordfors/.conda/envs/dx2/lib/python3.8/site-packages/dash_html_components/__init__.py", line 1, in <module>
    from dash.html import *  # noqa: F401, F403, E402
ModuleNotFoundError: No module named 'dash.html'

Can someone show how to make this work?

2

Hi @dnordfors

Your code will work if you change

html.DataList(...

to

html.Datalist(...   # (no capital L)

But I think most people use a dcc.Dropdown for this?

Currently, there are no examples for the html components in the dash docs. There is however a link to more information at Mozilla:

image
image811×356 37.9 KB

If you go there, the examples look like the following. They just need to be converted to Dash/Python syntax: For example,

image
image1007×588 71.3 KB

Here’s what it looks like in Dash - I just took the liberty of removing the Vanilla option, because everyone knows that Vanilla is not a flavor :ice_cream: :slightly_smiling_face:


options = [html.Option(value=x) for x in ["Chocolate", "Coconut", "Mint", "Strawberry"]]
html.Div(
    [
        html.Datalist(id="ice-cream-flavors", children=options),
        dcc.Input(
            id="ice-cream-choice", list="ice-cream-flavors", name="ice-cream-choice",
        ),
    ]
)
3

Thank you! Now it works!