详细前端代码写于上一篇：输入搜索、分组展示选项、下拉选取，el-select 实现：即输入关键字检索，返回分组选项，选取跳转到相应内容页 —— VUE项目-全局模糊检索

【效果图】：分组展示选项 =>【去界面操作体验】

【mybatis】：多数据表抓取数据

	<select id="findNews" resultType="com.bootdo.search.vo.SearchDetail">
		SELECT      n.cid           AS srcId,
		            pt.id           AS typeId,
		            pt.type_key     AS typeKey,
		            pt.page_type    AS pageType,
		            pt.page_name    AS srcTypeName,
		            n.title         AS srcName,
		            n.summary       AS alias,
		            pt.page_path    AS srcPath
        FROM a_news n
        LEFT JOIN a_product_type pt ON n.type_id = pt.id
        WHERE n.sys_id = #{sysId} AND n.is_enabled = 0 AND (n.title LIKE #{query} OR n.summary LIKE #{query} OR n.content LIKE #{query})
        LIMIT 20
	</select>

	<select id="findProducts" resultType="com.bootdo.search.vo.SearchDetail">
        SELECT      pt.id            AS srcId,
		            pt.page_type    AS pageType,
		            pt.page_name    AS srcTypeName,
                    pt.type_name     AS srcName,
                    pt.type_key     AS alias,
                    pt.page_path    AS srcPath
        FROM a_product_type pt
        WHERE  pt.sys_id = #{sysId} AND pt.is_deleted = 0 AND pt.type_name LIKE #{query}
        LIMIT 20
	</select>

    <select id="findItemInfos" resultType="com.bootdo.search.vo.SearchDetail">
		SELECT      n.cid           AS srcId,
		            pt.id           AS typeId,
		            pt.type_key     AS typeKey,
		            pt.page_type    AS pageType,
		            pt.page_name    AS srcTypeName,
		            pt.type_name    AS srcName,
		            pt.type_name    AS alias,
		            pt.page_path    AS srcPath
        FROM a_item_info n
        LEFT JOIN a_product_type pt ON n.type_id = pt.id
        WHERE n.sys_id = #{sysId} AND n.is_enabled = 0 AND n.content LIKE #{query}
        LIMIT 20
	</select>

【java】:各数据源进一步整理、合并、分组

java">    public List<SearchVO> search(Map<String, Object> params){
        Map<String, SearchDetail> map = new HashMap<>();
        List<SearchDetail> products = searchDao.findProducts(params);
        List<SearchDetail> itemInfos = searchDao.findItemInfos(params);
        List<SearchDetail> news = searchDao.findNews(params);
        for(SearchDetail sd : products){
            String srcPath = sd.getSrcPath()+"?typeKey="+sd.getAlias();
            sd.setSrcPath(srcPath);
            map.put(srcPath, sd);
        }
        for(SearchDetail sd : itemInfos){
            this.changePath(map, sd);
        }
        for(SearchDetail sd : news){
            this.changePath(map, sd);
        }
        return groupSearchDetailsByTypeName(map.values());
    }

    private void changePath(Map<String, SearchDetail> map, SearchDetail sd){
        String srcPath = sd.getSrcPath();
        if(StringUtils.equals(srcPath, "/n")){
            srcPath = srcPath+"/nId?showDetailNewId="+sd.getSrcId()+"&menuSearch=true";
            sd.setSrcPath(srcPath);
        }
        if(StringUtils.equals(srcPath, "/p")){
            srcPath = srcPath+"/pId?showDetailNewId="+sd.getSrcId()+"&menuSearch=true&typeId="+sd.getTypeId()+"&typeKey="+sd.getTypeKey();
            sd.setSrcPath(srcPath);
        }
        map.put(srcPath, sd);
    }

    private List<SearchVO> groupSearchDetailsByTypeName(Collection<SearchDetail> sds) {
        // 使用 Collectors.groupingBy 按 srcTypeName（即 label）分组
        Map<Integer, List<SearchDetail>> groupedByTypeName = sds.stream()
                .collect(Collectors.groupingBy(SearchDetail::getPageType));

        // 将分组后的数据转换为 List<SearchVO>
        List<SearchVO> searchVOList = new ArrayList<>();
        for (Map.Entry<Integer, List<SearchDetail>> entry : groupedByTypeName.entrySet()) {
            SearchVO searchVO = new SearchVO();
            List<SearchDetail> value = entry.getValue();
            searchVO.setLabel(value.get(0).getSrcTypeName());
            searchVO.setOptions(value);
            searchVOList.add(searchVO);
        }
        return searchVOList;
    }

vue、js

<el-row :gutter="20" style="display: flex;  border-radius: 5px;" >
	<el-col style="margin-bottom: 7px;">
		<lilo-group-select @change="groupSelectChange" :multiple="false" :likeQuery="true" :searchApi="'/api/list/search'" clearable placeholder="请输入快速搜索" ></lilo-group-select>
	</el-col>
</el-row>


groupSelectChange(option) {
	console.log("下拉选项选中："+JSON.stringify(option));
	if(option==''|| option.srcPath=='')return;
	// this.$router.push(option.srcPath);
	this.$router.push(option.srcPath).catch(err => {
		if (err.name !== 'NavigationDuplicated') {
			// 处理其他可能的错误
			console.error(err);
		}
		// 对于 NavigationDuplicated 错误，可以选择不做任何处理
	});
},

详细前端代码写于上一篇：输入搜索、分组展示选项、下拉选取，el-select 实现：即输入关键字检索，返回分组选项，选取跳转到相应内容页 —— VUE项目-全局模糊检索