如何在Bokeh中实现小部件镜像？含双WidgetBox联动场景

我来给你写一个完整的实现方案，亲测能满足你说的需求：两个独立的widget组，每组里的输入框负责过滤对应的多选框，而且初始时两个多选框的选项完全相同。

第一步：导入必要的模块 #

先把Bokeh相关的核心模块导入进来：

from bokeh.io import show
from bokeh.layouts import widgetbox, row
from bokeh.models import TextInput, MultiSelect, CustomJS

第二步：定义初始选项并创建部件 #

先把共用的初始选项统一定义，再分别创建两组输入框和多选框：

# 两个多选框共用的初始选项
initial_options = ['apples', 'oranges', 'grapes']

# 第一组部件
input1 = TextInput(placeholder="输入内容过滤多选框1...")
multiselect1 = MultiSelect(options=initial_options, title="多选框1")

# 第二组部件
input2 = TextInput(placeholder="输入内容过滤多选框2...")
multiselect2 = MultiSelect(options=initial_options, title="多选框2")

第三步：编写实时过滤回调函数 #

用CustomJS写前端回调，不用后端就能实现实时过滤，响应速度更快：

# 给input1绑定过滤回调，对应更新multiselect1
filter_callback1 = CustomJS(
    args=dict(input=input1, ms=multiselect1, initial=initial_options),
    code="""
        // 把输入转为小写，实现不区分大小写的过滤
        const search_query = input.value.toLowerCase();
        // 筛选出初始选项中包含搜索文本的项
        const filtered_options = initial.filter(item => item.toLowerCase().includes(search_query));
        // 更新多选框的选项列表
        ms.options = filtered_options;
        // 可选：如果希望过滤时自动清空已选内容，取消下面一行注释
        // ms.value = [];
    """
)

input1.js_on_change('value', filter_callback1)

# 同理，给input2绑定对应的过滤回调
filter_callback2 = CustomJS(
    args=dict(input=input2, ms=multiselect2, initial=initial_options),
    code="""
        const search_query = input.value.toLowerCase();
        const filtered_options = initial.filter(item => item.toLowerCase().includes(search_query));
        ms.options = filtered_options;
        // ms.value = [];
    """
)

input2.js_on_change('value', filter_callback2)

第四步：布局并展示页面 #

把两组部件放在一行展示，方便你直观对比效果：

# 布局两组部件
layout = row(widgetbox(input1, multiselect1), widgetbox(input2, multiselect2))
# 启动Bokeh服务并展示页面
show(layout)

额外扩展：多选框选中状态同步 #

如果你还想让两个多选框的选中内容保持同步（比如选了多选框1的选项，多选框2自动同步选中），可以再加一段同步回调：

sync_callback = CustomJS(
    args=dict(ms1=multiselect1, ms2=multiselect2),
    code="""
        // 判断触发事件的多选框，同步另一个的选中值
        if (cb_obj === ms1) {
            ms2.value = ms1.value;
        } else {
            ms1.value = ms2.value;
        }
    """
)

# 绑定两个多选框的选中状态变化事件
multiselect1.js_on_change('value', sync_callback)
multiselect2.js_on_change('value', sync_callback)

运行代码后，你就能看到：输入框里输入内容时，对应的多选框会实时过滤出包含输入文本的选项，初始时两个多选框的选项完全一致，还能按需开启选中状态同步功能。

内容的提问来源于stack exchange，提问作者flamenco