?詳細前端代碼寫于上一篇：輸入搜索、分組展示選項、下拉選取，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 srcPathFROM a_news nLEFT JOIN a_product_type pt ON n.type_id = pt.idWHERE 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 srcPathFROM a_product_type ptWHERE 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 srcPathFROM a_item_info nLEFT JOIN a_product_type pt ON n.type_id = pt.idWHERE n.sys_id = #{sysId} AND n.is_enabled = 0 AND n.content LIKE #{query}LIMIT 20</select>【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項目-全局模糊檢索
)
