JS实现下拉框自定义模糊查询

1.1 预期效果

下拉框查询时，下拉框自带点的模糊查询为文字不连续也能查出，希望可以实现模糊查询只匹配连续的内容。如下图所示：

1.2 解决思路

通过 SQL 数据集 like 模糊查询，借助一个辅助标签控件和 JS 实现。

2.1 准备模板

1）新建模板，新建数据集 ds1，SQL语句为：SELECT * FROM 订单 WHERE 订单ID LIKE '%${match}%' ，其中有一个数据集参数「match 」，如下图所示：

2）新建数据集ds2，SQL语句为：SELECT * FROM 订单 WHERE 订单ID LIKE '%${订单id}%'，其中有一个数据集参数「订单id」，如下图所示：

3）设计报表样式，将对应字段拖入到单元格中。如下图所示：

2.2 添加控件

1）打开「参数面板」，将参数「match 」和「订单id」都添加到参数面板，如下图所示：

添加后，「订单id」控件类型选择「下拉框控件」，「match 」控件类型选择「标签控件」。

2）为「订单id」下拉框控件绑定数据字典。如下图所示：

3）将「match 」标签控件和其左边的标签控件设置为不可见，即隐藏这两个控件，如下图所示：

2.3 添加事件

「订单id」下拉框控件添加「编辑后」事件，事件内容为获取控件输入的值，并将值传给 match 参数，ds1 中利用 match 参数获得模糊匹配的项，下拉框 数据字典 ds1再重新获得待选项。如下图所示：

JavaScript 代码如下：

var a=this.getText();
this.options.form.getWidgetByName("match").setValue(a); 

2.4 效果预览

保存模板，点击「分页预览」，在下拉框中输入12后，将不会出现 10029 之类的待选项。PC端效果如下图所示：

注：不支持移动端。

已完成模板可参考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现下拉框自定义模糊查询.cpt

点击下载模板：

点击下载模板：JS实现下拉框自定义模糊查询.cpt