如何利用搜索控件实现PC端页面的自动搜索与模糊匹配

关键词：搜索控件

一、需求

用户在搜索框录入字符之后，系统自动搜索币别，并列出匹配项。然后，用户选择并点击其中的一个匹配项，或录入完整内容后点击回车搜索，系统自动打开币别的详情界面。

二、思路与方案

2.1 分析思路

该需求主要涉及PC端搜索控件的使用，参考搜索控件的开发指南进行开发即可。

2.2 实现方案

1. 页面上添加搜索控件，设置“搜索风格”属性为"自动补全"。

2. 捕获 getSearchList 事件，根据用户录入的文本，模糊搜索币别，把币别的中文名称返回。

3. 捕获 search 事件，匹配模糊搜索币别中文名称。如果搜索到，则打开对应的币别详情界面。

三、实现过程

1. 开发页面，其设计器界面如下图所示。

注意：需配置搜索控件的“搜索风格”属性。

2. 重写 getSearchList 事件，根据用户录入的文本，模糊搜索币别，把币别的中文名称返回。

	/**
	 * 用户敲入搜索字符时，即时触发：输出模糊搜索结果
	 */
	@Override
	public List<String> getSearchList(SearchEnterEvent evt) {
		Search search = (Search) evt.getSource();
		if (StringUtils.equals(KEY_SEARCH, search.getKey())) {
			String searchText = evt.getText();
			if (StringUtils.isNotBlank(searchText))
				return this.doSearchList(searchText);
		}
		return null;
	}
	
	/**
	 * 模糊搜索币别中编码和名字包含搜索关键字的结果
	 * 实现搜索列表，在搜索框输入后列举出搜索到的数组
	 * @param searchText
	 * @return	搜索到的数据
	 */
	private List<String> doSearchList(String searchText) {
		// 模糊搜索结算方式
		// 构建取数条件
		ORM orm = ORM.create();
		Map<String, String> searchList = new HashMap<String, String>();
		// 模糊搜索币别
		QFilter filter1 = new QFilter("number", QCP.like, "%" + searchText + "%");
		QFilter filter2 = new QFilter("name", QCP.like, "%" + searchText + "%");
		QFilter filters = filter1.or(filter2);
		DynamicObjectCollection collection = orm.query("bd_currency", new QFilter[] { filters });
		for (DynamicObject obj : collection) {
			searchList.put("bd_currency" + " " + obj.get("id").toString(), "币别：" + obj.get("number") + obj.get("name"));
		}
		// 把本次搜索结果放到页面缓存：后续search事件要用到
		getPageCache().put("searchList", SerializationUtils.toJsonString(searchList));
		return new ArrayList<>(searchList.values());
	}

3. 重写 search 事件，匹配模糊搜索币别中文名称。如果搜到，则打开对应的币别详情界面。

	/**
	 * 用户录入搜索字符完毕，回车时触发：准确定位
	 */
	@Override
	public void search(SearchEnterEvent evt) {
		Search search = (Search) evt.getSource();
		if (StringUtils.equals(KEY_SEARCH, search.getKey())){
			String searchText = evt.getText();
			this.doSearch(searchText);
		}
	}
	
	/**
	 * 实现搜索
	 * @param searchText	搜索文本
	 */
	private void doSearch(String searchText) {
		// 从模糊查询结果中，匹配搜索文本：找到后，打开对应的币别详情界面
		if (getPageCache().get("searchList") != null) {
			Map<String, String> searchList = SerializationUtils.fromJsonString(getPageCache().get("searchList"), Map.class);
			searchList.forEach((key, value) -> {
				if (searchText.equals(value)) {
					String[] arr = key.split(" ");
					BillShowParameter param = new BillShowParameter();
					param.setPkId(arr[1]);
					param.setFormId(arr[0]);
					param.getOpenStyle().setShowType(ShowType.Modal);
					param.setBillStatus(BillOperationStatus.VIEW);
					param.setStatus(OperationStatus.VIEW);
					getView().showForm(param);
				}
			});
		}
	}

四、效果图

五、开发环境版本

不限

六、参考资料

开发平台

学习成长中心

控件使用指南——搜索控件

移动列表开发样例（包含模糊搜索实现）