如何修改JQGrid的searchoptions实现带输入过滤的多选下拉搜索工具栏

核心修改方案 #

你需要替换现有searchoptions中的dataInit函数，改用支持搜索过滤的多选控件插件（推荐使用Select2，它能轻松实现输入过滤+多选复选的需求），具体修改如下：

1. 修改列配置的searchoptions部分
   将原有的dataInit: dataInitMultiselect替换为自定义的初始化函数，同时调整相关属性：

searchoptions: {
    sopt: ["in"],
    searchOperators: false,
    clearSearch: false,
    dataUrl: '@Url.Content("~/Home/ResellerSelectDesc")',
    // 替换原dataInit函数，初始化带搜索的多选控件
    dataInit: function(elem) {
        // 初始化Select2
        $(elem).select2({
            placeholder: "筛选供应商",
            multiple: true,
            width: "100%",
            // 输入过滤匹配逻辑（不区分大小写）
            matcher: function(params, data) {
                if (!params.term) return data;
                const searchTerm = params.term.toLowerCase();
                return data.text.toLowerCase().includes(searchTerm) ? data : null;
            }
        });
        // 绑定JQGrid搜索事件，确保选中值能被正确提交
        $(elem).on("change", function() {
            $(this).trigger("change");
        });
    },
    // 移除原attr配置，由Select2接管渲染
    defaultValue: getValueoffilter(filters, "resellerDesc")
},

2. 前置准备

• 引入Select2的样式文件和JavaScript文件（需自行下载到本地项目中）
• 确保你的项目已引入jQuery（Select2依赖jQuery）

关键说明 #

• 上述代码中的matcher函数实现了输入文本的模糊匹配，输入"au"时会自动筛选出包含该字符的选项（如audit、Renault）
• Select2会自动渲染带搜索框的多选下拉面板，完全替代原生select的样式，同时保留JQGrid的搜索提交逻辑
• 如果你的dataUrl返回的是JSON格式数据而非HTML的<option>标签，需要在Select2配置中添加ajax选项来加载数据，具体可根据返回格式调整

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