Generate dynamic objects from callback

Dash Python
1

Hi,

I’ve lately tried to implement a simple search in my website. The idea was to input a search query and get a list of elements back, in the form of collapsible text fields. I couldn’t make it work since the Output ID isn’t fixed but has to be generated for each collapsible - is there a nice way to dynamically generate new objects like collapsibles within a callback?

Here’s a code snippet:

html.Div([
            html.Div([
                dbc.Row([
                    html.H3('ID-Suche'),
                ]),
                dbc.Row([
                    dcc.Input(id="id_input", value="Ag", type="text", placeholder="Og1tA3IB...", debounce=True),
                ]),
                html.Div(children=[], id="id_output", style={"margin-top": "15px"}),
            ], style={"display": "block", "padding-top": "45px"})
        ])

@app.callback(
    Output('id_output', 'children'),
    [Input('id_input', 'value')],
    [State('id_output', 'children')])
def show_hide_element(id_input, children):
    children = []
    for urteil_id in urteile_df["id"]:
        if id_input in urteil_id:
            row = urteile_df[urteile_df["id"].str.match(urteil_id)]

            volltext = row["body"]

            el = html.Div(children=[
                dbc.Row([
                    dbc.Col([
                        html.Div(row["id"], style={"font-weight": "bold"}),
                    ], width=2),
                    dbc.Col([
                        html.Div(row["date"]),
                    ], width=2),
                    dbc.Col([
                        html.Div(row["gericht"]),
                    ]),
                    dbc.Col([
                        html.Pre(volltext.str[:200] + "..."),
                    ], width=6),
                ]),
                html.Hr(),
            ], style={"margin": "20px", "font-size": "12px"})
            children.append(el)
    return children

Thanks for any advice