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

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

                        html.DataList(id='vu_add_query_suggestions',children=list(df[column].apply(lambda x: html.Option(value=x)).values)),

I get the following error:
AttributeError: module 'dash_html_components' has no attribute 'DataList'
I am using the following module:

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?

Hi @dnordfors

Your code will work if you change



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:

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

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.Datalist(id="ice-cream-flavors", children=options),
            id="ice-cream-choice", list="ice-cream-flavors", name="ice-cream-choice",

Thank you! Now it works!