# Search for Items in Dropdown, but with custom query

**URL:** <https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787>\
**Category:** Dash Python\
**Created:** [June 9, 2020, 4:32am UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787 "2020-06-09T04:32:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![joaofb](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@joaofb](https://community.plotly.com/u/joaofb)\
**Post date:** [June 9, 2020, 4:32am UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/1 "2020-06-09T04:32:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 9, 2020, 4:48am UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/2 "2020-06-09T04:48:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joaofb](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@joaofb](https://community.plotly.com/u/joaofb)\
**Post date:** [June 9, 2020, 5:11am UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/3 "2020-06-09T05:11:17Z")

</div>

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.

```auto
@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)

```

```auto
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?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [June 9, 2020, 6:02am UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/4 "2020-06-09T06:02:37Z")

</div>

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](https://community.plotly.com/t/dash-input-list-option-updating-the-datalist-from-external-api/9981/4).

---

<div class="post-metadata">

**Author:** ![joaofb](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@joaofb](https://community.plotly.com/u/joaofb)\
**Post date:** [June 9, 2020, 9:01pm UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/5 "2020-06-09T21:01:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tks](https://avatars.discourse-cdn.com/v4/letter/t/e99b99/32.png) [@tks](https://community.plotly.com/u/tks)\
**Post date:** [July 27, 2020, 7:22pm UTC](https://community.plotly.com/t/search-for-items-in-dropdown-but-with-custom-query/40787/6 "2020-07-27T19:22:36Z")

</div>

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!