python - 如何在没有提交按钮的情况下过滤导航栏中项目列表的搜索结果？

Question

我想创建这样的东西，它可以让您在不按任何按钮的情况下进行搜索（wazirx 网站左侧导航栏上的搜索栏）

我想在导航栏中将相同的搜索功能应用于印度各州。

我创建的布局如下所示。 数据集 caste.csv 取自kaggle。 这是我到目前为止编写的代码...... 导入，一些自定义 css 和布局。

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

df = pd.read_csv("Caste.csv")

# the style arguments for the sidebar.
SIDEBAR_STYLE = {
    "position": "flexible",
    "margin_top": "auto",
    "margin_left": "auto",
    "margin_bottom": "auto",
    "width": "auto",
    "padding": "auto",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar.
CONTENT_STYLE = {
    "margin-left": "auto",
    "margin-right": "auto",
    "margin-top":"auto",
}

app.layout = dbc.Container([
                dcc.Store(id="store"),
                dcc.Location(id="url"),
                dbc.Row([
                    dbc.Col([
                        dbc.Input(type="search", placeholder="Search states", style={"margin-top":"20px"}),
                        html.Hr(),
                        dbc.Nav([
                            dbc.NavLink(i, href=i, active="exact") for i in df["state_name"].unique()
                            ],
                        vertical=True,
                        pills=True,
                        ),
                    ], width=2, style=SIDEBAR_STYLE),
                    dbc.Col([
                        dbc.Card(
                            dbc.CardBody([
                                dbc.Tabs([
                                    dbc.Tab(label="Convicts", tab_id="convicts"),
                                    dbc.Tab(label="Under trial", tab_id="under_trial"),
                                    dbc.Tab(label="Detenues", tab_id="detenues"),
                                ],
                                className="tabs",
                                id="tabs",
                                active_tab="convicts"),
                            html.Div(id="content")
                            ]),
                        style={"box-shadow": "0 4px 8px 0 rgba(0,0,0,0.2)"}
                        )
                    ])
                ])
            ], fluid=True)

回调

@app.callback(Output("content", "children"),
             [Input("tabs", "active_tab"),
             Input("store", "data")])
def show_graph(tab_id, data):
    if tab_id=="convicts":
        return [dcc.Graph(id="gender convicts graph", figure=data["gender_convicts"]), html.Hr(), dcc.Graph(id="caste convicts graph", figure=data["caste_convicts"])]
    elif tab_id=="under_trial":
        return [dcc.Graph(id="gender under trial graph", figure=data["gender_under_trial"]), html.Hr(), dcc.Graph(id="caste under trial graph", figure=data["caste_under_trial"])]
    elif tab_id=="detenues":
        return [dcc.Graph(id="gender detenues graph", figure=data["gender_detenues"]), html.Hr(), dcc.Graph(id="caste detenues graph", figure=data["caste_detenues"])]

@app.callback(Output("store", "data"),
             [Input("url", "pathname")])

def generate_graphs(pathname):
        # remove / and replace %20 with whitespace in the URL pathname to get the formated state name which will be used below. 
        pathname = pathname.replace("/", "")
        pathname = pathname.replace("%20", " ")

        # df1_convicts has only convicts column kept, rest all removed, and groupby is done on gender column
        df1_convicts = df[df["state_name"]==pathname]
        df1_convicts = df1_convicts.drop(["is_state", "caste", "under_trial", "detenues", "others"], axis=1)
        df1_convicts = df1_convicts.groupby(['state_name', "year", "gender"])['convicts'].sum().reset_index()

        # df2_convicts has only convicts column kept, rest all removed, and groupby is done on caste column
        df2_convicts = df[df["state_name"]==pathname]
        df2_convicts = df2_convicts.drop(["is_state", "gender", "under_trial", "detenues", "others"], axis=1)
        df2_convicts = df2_convicts.groupby(["state_name", "year", "caste"])["convicts"].sum().reset_index()

        # df1_under_trial has only under_trial column kept, rest all removed, and groupby is done on gender column
        df1_under_trial = df[df["state_name"]==pathname]
        df1_under_trial = df1_under_trial.drop(["is_state", "caste", "convicts", "detenues", "others"], axis=1)
        df1_under_trial = df1_under_trial.groupby(['state_name', "year", "gender"])['under_trial'].sum().reset_index()

        # df2_under_trial has only under_trial column kept, rest all removed, and groupby is done on caste column
        df2_under_trial = df[df["state_name"]==pathname]
        df2_under_trial = df2_under_trial.drop(["is_state", "gender", "convicts", "detenues", "others"], axis=1)
        df2_under_trial = df2_under_trial.groupby(["state_name", "year", "caste"])["under_trial"].sum().reset_index()

        # df1_detenues has only detenues column kept, rest all removed, and groupby is done on gender column
        df1_detenues = df[df["state_name"]==pathname]
        df1_detenues = df1_detenues.drop(["is_state", "caste", "convicts", "under_trial", "others"], axis=1)
        df1_detenues = df1_detenues.groupby(['state_name', "year", "gender"])['detenues'].sum().reset_index()

        # df2_under_trial has only under_trial column kept, rest all removed, and groupby is done on caste column
        df2_detenues = df[df["state_name"]==pathname]
        df2_detenues = df2_detenues.drop(["is_state", "gender", "convicts", "under_trial", "others"], axis=1)
        df2_detenues = df2_detenues.groupby(["state_name", "year", "caste"])["detenues"].sum().reset_index()

        gender_convicts = px.bar(df1_convicts, x="year", y="convicts", color="gender", title="gender distribution of convicts",
                                color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)
        caste_convicts = px.bar(df2_convicts, x="year", y="convicts", color="caste", title="caste distribution of convicts",
                                color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)

        gender_under_trial = px.bar(df1_under_trial, x="year", y="under_trial", color="gender", title="gender distribution of under_trial",
                                    color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)
        caste_under_trial = px.bar(df2_under_trial, x="year", y="under_trial", color="caste", title="caste distribution of under_trial",
                                    color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)

        gender_detenues = px.bar(df1_detenues, x="year", y="detenues", color="gender", title="gender distribution of detenues",
                                color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)
        caste_detenues = px.bar(df2_detenues, x="year", y="detenues", color="caste", title="caste distribution of detenues",
                                color_discrete_sequence=px.colors.qualitative.Set1, opacity=0.6)

        return {"gender_convicts":gender_convicts, "caste_convicts":caste_convicts,
                "gender_under_trial":gender_under_trial, "caste_under_trial":caste_under_trial,
                "gender_detenues":gender_detenues, "caste_detenues":caste_detenues}

if __name__ == '__main__':
    app.run_server(debug=True)

我应该如何应用搜索功能？

标签： pythonpython-3.xplotlyplotly-dashdashboard