How to use dcc.Input to search for dictionary key

📊 Plotly Python
1

As the title suggests I’m looking for a way to search (presumably with dcc.Input) through a list of Python dictionary keys to then display the corresponding list of values using plotly. Putting in a new search would ideally hide the first search results and replace them with the new. I’ve found a couple of examples that are close to what I’m needing, but don’t quite get me there.

Is there a way to filter paragraphs by the content of a text search box? - Dash Python - Plotly Community Forum

or

callback - Python Dash: How to use Input from a dynamically created Dropdown? - Stack Overflow

Can anyone help?

Thanks,

2

hi @PlottingPlotly
welcome to the community.

I’m not sure I fully understand.

So you have a list of dictionary keys, for example:

my_fruits = [{'apple':'red'}, {'banana':'yellow'}, {'watermelon':'green'}]

Following our fictitious data, you’d like to use the dcc.Input to search through the fruit behind the scene and display the colors as the dcc.Input options?

3

Sorry if I wasn’t clear.

So if I had the dictionary you have in your post and I put ‘apple’ into the input, ‘red’ would output to the dashboard. Then, without refreshing, if ‘banana’ were put in the input then ‘red’ would go away and be replaced with ‘yellow’

4

Something like this?

from dash import Dash, dcc, html, callback, Input, Output

my_fruits_list = [{'apple':'red'}, {'banana':'yellow'}, {'watermelon':'green'}]

# simpler if converted to a simple dictionary for lookups.
fruit_color_map = {}
for fruit_dict in my_fruits_list:
    for fruit_name, color in fruit_dict.items():
        fruit_color_map[fruit_name.lower()] = color
# Now fruit_color_map will be: {'apple': 'red', 'banana': 'yellow', 'watermelon': 'green'}

app = Dash()

app.layout = html.Div([
    html.H1("My Fruit Color Finder"),

    dcc.Input(
        id='fruit-input',
        type='text',
        placeholder='Enter a fruit (e.g., apple)',
        value=''
    ),

    html.Br(),
    html.Div(id='color-output-div')
])

@callback(
    Output('color-output-div', 'children'),
    Input('fruit-input', 'value')
)
def update_output_div(input_value):

    if not input_value:
        return ""

    fruit_name_to_check = input_value.lower().strip()
    color = fruit_color_map.get(fruit_name_to_check)

    if color:
        return color
    else:
        return ""

# 5. Run the app
if __name__ == '__main__':
    app.run(debug=True)