Hi, everybody.
I have encountered one problem in my work. I have a Dropdown Menu in which I have implemented several elements. Such as search-input and checklist. My main problem is that when using search-input, the page is constantly updated. Tell me how I can avoid this. Thank you very much in advance
my code :
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc, Input, Output, State, callback_context, no_update, callback, exceptions
from sql_execute import get_lpu, create_counter
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
lpu_list = [{'label': f'lpu{lpu}', 'value': f'lpu{lpu}'} for lpu in range(10)]
app.layout = html.Div([
html.Div(
html.Div(
[
html.Div(
id='view',
style={
'display': 'flex',
'height': '38px',
'width': '29vw',
'border': '1px solid',
'padding-right': '5px',
'textAlign': 'center',
'overflow': 'hidden',
'font-size': '20px'
},
),
dbc.DropdownMenu(
id="dropdown-menu",
align_end=True,
children=[
html.Div(
id='select_all', className='noselect', children=html.Div(
children=[html.Img(src="/assets/bx-list-check.svg"),
html.Span("Выбрать все"),
]
),
),
html.Div(
[
dcc.Input(
id="search-input",
type="text",
placeholder="Type to filter",
autoComplete="off",
style={'margin-left': '.5rem'}
),
],
id="input-container",
),
dbc.DropdownMenuItem(divider=True),
dbc.Checklist(
id = 'checklist',
options=lpu_list,
persistence_type='session',
persistence='unique_id_for_checklist'
),
]
),
html.Div(id='output_div')
],
className='selector_containerFinal',
style={
'justify-content': 'center'
},
),
),
])
@callback(
Output('checklist', 'value'),
Input('select_all', 'n_clicks'),
State('checklist', 'options'),
State('checklist', 'value'))
def handle_select_all(n_clicks, options, curr_value):
if not n_clicks:
return no_update
triggered_element = callback_context.triggered[0]["prop_id"].split(".")[0]
if triggered_element == "select_all":
if curr_value is None:
curr_value = []
if len(curr_value) == len(options):
return []
return [option['value'] for option in options]
@callback(
Output("checklist", "options"),
Input("search-input", "value"),
)
def update_checklist_options(search_value):
if not search_value:
return lpu_list
filtered_options = [option for option in lpu_list if search_value.lower() in option["label"].lower()]
return filtered_options
(mb i can use Background Callback Caching | Dash for Python Documentation | Plotly, But I do not know how to do it)
How i can fix multiple updating
