I made a component that suggests a city based on user input using an external API to fetch the results
This works amazingly well considering the overhead of the entire Python app.
However, I’m missing some basic functionality that would apply to a Dropdown selection. In the latter, the options are always identified by label (what the user sees) and value (what the backend uses) properties. I use the value property in many callbacks across the application, because this is the unique id that can filter data in the database. I think this is quite standard practice.
Unfortunately, when using the new autocomplete component, it seems that the only value retained when the user clicks on the option is the label, and not the id (the number you see in the Datalist underneath the location name). I also cannot use the Datalist component to grab this (because in theory it does have it inside the value property), because it gets emptied once the user selects an option.
Do you have any idea?
Here is the snippet of the code used
# App layout
html.Datalist(id='list-suggested-inputs', children=[html.Option(value='empty')]),
dbc.Input(
placeholder="Type",
id=dict(type='searchData', id='dest-loc'),
type="text",
persistence=True,
autocomplete="off",
list='list-suggested-inputs'
)
#Callback
@callback(
Output('list-suggested-inputs', 'children'),
Input({"id": 'dest-loc', "type": "searchData"}, "value"),
prevent_initial_call=True
)
def suggest_locs(value):
if len(value) < 4:
raise PreventUpdate
# Calling the API here
locations = get_locations(value, count=5)
options = []
for _, row in locations.iterrows():
options.append(
html.Option(
value=(
f"{row['name']} ({flag(row['country'])} | {row['longitude']:.1f}E, "
f"{row['latitude']:.1f}N, {row['elevation']:.0f}m)"
),
label=str(row["id"]),
)
)
return options
I want to persist the label or row['id'] of the selected option.
