Open ViacheslavLabs opened 3 years ago
I've faced with the same issue while trying to implement fuzzy find like in Sublime Text. Does anyone know a workaround?
Moreover (besides that filter is applied on the frontend side) it also sorts options by the value
if search_value
is not empty.
import json
import dash
import dash.dependencies as dep
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(id="dropdown"),
html.Pre(id="output", style=dict(marginTop="150px")),
])
@app.callback(dep.Output("output", "children"),
dep.Output("dropdown", "options"),
dep.Input("dropdown", "search_value"))
def filter_dropdown(search_value: str):
options = [
{"label": "#1 - value=1 - xxx", "value": 1},
{"label": "#2 - value=3 - xxx", "value": 3},
{"label": "#3 - value=4 - xxx", "value": 4},
{"label": "#4 - value=2 - xxx", "value": 2},
]
return [
f"search_value = {search_value!r}\n"
f"options = {json.dumps(options, indent=4)}",
options
]
app.run_server()
Explanation
Search is very convenient for dropdowns. Usually, a user may search by a nickname or with mistakes. Example:
The solution in dash docs is to provide options with callback on search_value input.
BUG: the solution doesn't work because dcc Dropdown will always try to search over options by itself. BUG Solution: provide the option to turn off the front-end search.
Quick example
Current behavior for example:
Expected behavior for example:
Always show provided options from the callback on an user search.