Black Lives Matter. Please consider donating to Black Girls Code today.

Problem with html.Datalist

hi,
I have a code with a dcc.Input and html.Datalist. Well. When I introduce “lion” in input all is correct, but when I introduce "lion " ( with space ) the result is different and would be the same. why?

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import pandas as pd
from dash.dependencies import Input, Output, State

data_aux = pd.DataFrame()
data_aux["Nombre"] = ['Lionel Messi', 'Isaac Capriglione', 'Giammaria Maglione', 'Markus Palionis', 'Maxime Allione', 'Lionel Mallein', 'Paolo Ghiglione', 'Paolo Ghiglione', 'Elion Minaj', 'Lionel Carole', 'Lionn', 'Lion Kalentjev', 'Million Manhoef', 'Elion Spahija', 'Giorgio Lionetti', 'Antonio Tartaglione', 'Federico Coniglione', 'Saul Castiglione', 'Domenico Zampaglione', 'Lionnel Yakam']


app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        dcc.Input(id='input-1',
            type='text',
            list='list',
        ),
        html.Datalist(
            id='list',
            children=[]
        ),
        html.Div(id="kk")
    ]
)

@app.callback(
    Output('kk','children'),
    [Input('list','children')]
)
def kk1(children):
    return children
    
@app.callback(
    Output('list','children'),
    [Input('input-1','value')]
)
def kk(inputvalue):
    if inputvalue:
        data_aux1 = data_aux.copy()
        for i in inputvalue.split(" "):
            data_aux1 = data_aux1[data_aux1['Nombre'].str.contains("(?i){}".format(str(i)))==True]
        return [html.Option(value=word) for word in data_aux1["Nombre"][0:20].to_list()] 

if __name__ == "__main__":
    app.run_server()

Nevertheless, if you run this code in line command (the same as above), works! I dont undertand what happen:

import pandas as pd

data_aux = pd.DataFrame()

data_aux["Nombre"] = ['Lionel Messi', 'Isaac Capriglione', 'Giammaria Maglione', 'Markus Palionis', 'Maxime Allione', 'Lionel Mallein', 'Paolo Ghiglione', 'Paolo Ghiglione', 'Elion Minaj', 'Lionel Carole', 'Lionn', 'Lion Kalentjev', 'Million Manhoef', 'Elion Spahija', 'Giorgio Lionetti', 'Antonio Tartaglione', 'Federico Coniglione', 'Saul Castiglione', 'Domenico Zampaglione', 'Lionnel Yakam']

data_aux1 = data_aux.copy()
inputvalue = "lion "
for i in inputvalue:
    data_aux1 = data_aux1[data_aux1['Nombre'].str.contains("(?i){}".format(i))==True]
print(data_aux1)```

nobody? I need it for a proyect

The problem is that html.Datalist filter the list, so, is there a way to avoid that html.Datalist filter the list?

thanks!

I don’t think there’s anything we can do to control this - the interaction between <datalist> and <input> elements is built-in behavior of browsers and I don’t see any attributes available to modify it in the way you’re interested in doing.

I might suggest breaking your UI into two parts: a dcc.Dropdown to select from predefined values, and a dcc.Input (with no list) for entering new values. A little more cumbersome but it would give you more freedom.

Yes!, I did it. I used dcc.dropdown and dcc.input.

Thank you!!