Hello! I was wondering if there is a way to search for items in dcc.dropdown with a custom query. I know that I can update the options as the user types with a callback, but Dash’s search messes up with this. I am Brazilian, so a lot of words have accents, like São Paulo. But since Dash is accent sensitive if I write “sao paulo” in the dropdown, the option “São Paulo” won’t appear.
Is there any way to either make the query accent insensitive or make it custom?
Thanks in advance!
Hi @chriddyp! Thank you for your answer. I have seen this in the documentation, but I don’t think it solves the problem. I am already working with single dynamic options, but I still run into the accent problem. I’ll give the same example from above. Imagine there is an option labeled “São Paulo” and I want to make it appear by typing “sao pa.” What I am doing is to input “sao pa” into a call back function “update_options,” which filters the options by flattening both the input and the label strings and checking if there is a substring in it.
return helper.filter_options(search_value, cities)
def filter_options(search_value, cities):
if not search_value:
search_value = Location.flattening(search_value)
return [o for o in cities if search_value in Location.flattening(o["label"]) and search_value ==
The function then returns a list of options that will be included in the dropdown.
Hm interesting. I thought that dynamic options disabled the front-end behavior, but I haven’t looked into it in depth.
Another option I’ve seen in the community (not documented! sorry) is to use
html.Option, see the last example here: Dash: Input list option: updating the datalist from external api.
Thanks @chriddyp! Really appreciate the help. I will use this for now. Is there any chance of having a custom query feature for dcc.dropdown in the future?
Hi Chris, I’d also be interested in a way to disable the front-end filtering and just use
Dropdown.search_value to generate
Dropdown.options in a callback.
As for the tagged example, it looks like both
html.Option.value are visible to the user in
html.Datalist, which is not desirable in my current application where I would like to assign DB key values in the
Dropdown.value fields for use in other callbacks.