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

Dash Python
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",
        ),
    ]
)