Optimizing Dash Dashboards Dropdown menu

Hey,

Problem Statement:
So I have a list of 7000 employers which a user can select from in the dashboard written in Dash.
But this makes the page load very slow and crash.

Concept Help Needed on
What concept should I implement that when a user inputs a few letters of the employer, the query should load only those employers in the search bar and not a list of 7000 employers? or in general how to optimize this process.

Thanks

Hey,

I generated a drop-down list of 100k items and it works pretty well for me

But as an alternative to solving your problem. Make 2 related drop-down lists. In the first, only the first letter and the second the values starting with the first letters as a result of each list will be much smaller

1 Like

Hey @moriturus7
I used your suggestion; I think it works much faster this way and less cumbersome to display 7000 employers at once. basically using the input (initial few characters to populate the other dropdown) Thanks for the help.

   @app.callback(
    dash.dependencies.Output('employer', 'options'),
    [dash.dependencies.Input('my-id', 'value')]
)
def update_date_dropdown(name):
    if name == '':
        return {'label': 'employer_name', 'value': 'Employer'} 
    else:
      name_list = df['Employer'].str.lower().str.startswith(name)
      name_list = df[name_list]['Employer'].str.lower().unique()
      return [{'label': i, 'value': i} for i in name_list]
3 Likes

I am facing similar issue but with me i want to output values in another column based on the dropdown selection of 3 columns… have you face such problem i need help