Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Search for Items in Dropdown, but with custom query

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!

See the last example in https://dash.plotly.com/dash-core-components/dropdown, “Dynamic Options”

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.

@app.callback(
    dash.dependencies.Output("city", "options"),
    [dash.dependencies.Input("city", "search_value")],
)
def update_options(search_value):
    return helper.filter_options(search_value, cities)
def filter_options(search_value, cities):

    if not search_value:
        raise PreventUpdate

    search_value = Location.flattening(search_value)

    return [o for o in cities if search_value in Location.flattening(o["label"]) and search_value[0] ==
            Location.flattening(o["label"][0])]

The function then returns a list of options that will be included in the dropdown.

It is not working only with this code. I assume it is because of some JavaScript filtering that is taking place in the front-end. This brings me back to my question: is there a way to either disable this JS filtering or to make it accent insensitive?

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.Datalist and 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.label and 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.

Thanks!