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