# Dynamic options for drop down

**URL:** <https://community.plotly.com/t/dynamic-options-for-drop-down/7550>\
**Category:** Dash Python\
**Created:** [January 3, 2018, 7:19pm UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550 "2018-01-03T19:19:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 3, 2018, 7:19pm UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/1 "2018-01-03T19:19:36Z")

</div>

@chriddyp Hi again!

just wondering if there is a solution for handling large dropdowns where number of options is too large (i have some 130k items) and loading them all into dropdown is not practical? the typical solution is to wait for user to enter 1- or more characters and then display only those options that match user input.

if dcc.Dropdown component would fire change (or some other) events on user typing in the drop down then i could attach a callback and set options dynamically. but it would appear that change and value only gets fired/changed only when user actually selects an option in the drop down. is that correct?

if yes, then is there a workaround? or plans to upgrade to newer react-virtualized-select/VirtualizedSelect which has async option?

what i am looking for is experience similar to 4th example of this react-virtualized-select demo:  
[http://bvaughn.github.io/react-virtualized-select/](http://bvaughn.github.io/react-virtualized-select/)

many thanks!  
anton

---

<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:** [January 3, 2018, 7:54pm UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/2 "2018-01-03T19:54:24Z")

</div>

> [@AntonB](#):
>
> if yes, then is there a workaround? or plans to upgrade to newer react-virtualized-select/VirtualizedSelect

In [make dropdowns with hundreds of thousands of options more performant by chriddyp · Pull Request #47 · plotly/dash-core-components · GitHub](https://github.com/plotly/dash-core-components/pull/47) we upgraded to `react-virtualized-select` which enabled dropdowns to render with tens of thousands of options, even up to 100 thousand. See [Dropdown selector with a long list is very slow · Issue #103 · plotly/dash · GitHub](https://github.com/plotly/dash/issues/103)

 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f17c42b76cecdedfc70a5cf9915ebf6591f3d47c.gif)

However, it is not async. The “Dash way” to mimic the async options would be to have some type of callback that updates the `options` property based off of the `value` property and make the `value` property configurable so that it can update on every key-press instead of when selecting a dropdown. I imagine that the challenge would be in re-rendering the dropdown when the options are open with new options gracefully.  
This would be a great addition to the component - if anyone would like to take this on or if any company or organization would like to sponsor this feature ([Consulting, Training & Open-Source Development](https://plot.ly/products/consulting-and-oem)), please reach out 🙂

For now, another solution might be to use a text box input (`dcc.Input(type='text')`) and update a `html.Div` below the text box with a list of entries on every keypress. Something like:

```auto
@app.callback(Output('available-options', 'children'), [Input('text-box', 'value')])
def display_options(value):
    # some function that you write that might query a database or something
    options = get_options(value, number_of_options=10)
    return html.Ul([html.Li(option) for option in options])

```

In this case, the user would need to type the entire option, they wouldn’t be able to click on an option to preselect as they would in the `dcc.Dropdown`, but it could be performant for millions of records.

---

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 4, 2018, 12:30am UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/3 "2018-01-04T00:30:24Z")

</div>

Thanks Chris!

I ended up doing an dcc.Input where user starts typing, with callback that kicks in drop down options filtering after there are 3 characters or more, and a message to the user instructing to either select an item from the drop down or to keep on typing if there are less than 3 characters. this will work for now, but the biggest issue (aside from a bit quirky user experience) is not being able to have multiple outputs from the same inputs. i know it was discussed before and there is a guide on how to share data safely, but as you would imagine,doing this for each letter update is a little too much. perhaps being able to serve multiple outputs would make more sense for this scenario? for now i will explore if i can do some sort of in-memory cache with reliable invalidation

snippets of the code is:

```auto
                html.H5('Start typing to search for the item:',id='instruction'),
                html.Div([
                    html.H5('Name:', className='one columns'),
                    dcc.Input(id='item-input',className='two columns'),
                    dcc.Dropdown(
                        options=[],
                        searchable=True,
                        className='six columns',
                        id='item-selector')
                ], className='row')
.....

        self.app.callback(Out('item-selector', 'options'),
            [In('item-input','value')])(self.suggest_item_options)
        self.app.callback(Out('item-selector', 'value'),
                          [In('item-input', 'value')])(self.set_initial_item_choice)
        self.app.callback(Out('instruction', 'children'),
                          [In('item-input', 'value')])(self.update_instruction)
.....

    def update_instruction(self,value):
        if value is None or len(value) < 3:
            return 'Start typing to search for the item:'
        else:
            data = self.filter_big_list(value)
            return 'Found {} matches. Choose item from the list:'.format(len(data.index))

    def set_initial_item_choice(self,value):
        if value is None or len(value) < 3:
            return ''
        else:
            data = self.filter_big_list(value)
            return '' if len(data.index) =0 else data[0]

    def suggest_item_options(self, value):
        if value is None or len(value) < 3:
            return []
        else:
            data = self.filter_big_list(value)
            return [{'label': name, 'value': name} for name in data]

```

think for now it will do. will share if and when i get to making a more ‘user friendly’ and efficient solution.

thanks!  
anton

---

<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:** [January 4, 2018, 1:10am UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/4 "2018-01-04T01:10:41Z")

</div>

> [@AntonB](#):
>
> for now i will explore if i can do some sort of in-memory cache with reliable invalidation

Also check out the example here: [Capture window/tab closing event - #2 by chriddyp](https://community.plotly.com/t/capture-window-tab-closing-event/7375/2). It hasn’t made it into the docs yet.

---

<div class="post-metadata">

**Author:** ![AntonB](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@AntonB](https://community.plotly.com/u/AntonB)\
**Post date:** [January 4, 2018, 1:44pm UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/5 "2018-01-04T13:44:28Z")

</div>

> [@AntonB](#):
>
> ], className=‘row’)

Thank you, very helpful!

---

<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, 3:35am UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/6 "2020-06-09T03:35:32Z")

</div>

Hi there! I was working on a dash app and it would be great if the dropdown options appeared after typing in a few characters. Has any feature evolved from this?

Thank you!

---

<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, 5:57am UTC](https://community.plotly.com/t/dynamic-options-for-drop-down/7550/7 "2020-06-09T05:57:51Z")

</div>

Yes, this has been updated. See the [“Dynamic Options in Dropdown”](https://dash.plotly.com/dash-core-components/dropdown) example in the official dropdown documentation.