Dropdown - show both inputs and labels when typing

Dash Python
1

I use dcc.Dropdown where I have a list of dicts with labels and values, like:

dcc.Dropdown(
options=[{LABEL: “Label 1”, VALUE: “Value 1”}, {LABEL: “Label 2”, VALUE: “Value 2”}, {LABEL: “Label 3”, VALUE: “Value 3”}]
)

When I click on the dropdown and type I would like to be able to select the item by either label or value - so either by typing 'Value 1" or “Label 1”. Any way to do this in Dash?
Once selected I would like the item to be displayed using its label

2

Hi @kiteme I think you are searching for this:

1 Like
3

Add search to your options may help. Something as below:

from dash import Dash, dcc, html, Input, Output, dash_table, no_update  # Dash version >= 2.0.0
import plotly.express as px
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dcc.Dropdown(options=[{"label": 'Label 1', 
                           "value": "value1", 
                           'search':"Label 1"}, 
                          {"label": 'Label 2', 
                           "value": "value2", 
                           'search':"Label 2"},
                          {"label": 'Label 3', 
                           "value": "value3", 
                           'search':"Label 3"}]
                )
])

if __name__ == '__main__':
    app.run_server(debug=False)

Recording 2023-04-26 161717

1 Like