4 愛收藏 首頁搜尋功能實現

2022-02-20 07:03:03 字數 1164 閱讀 4392

隨著收藏的**增多，查詢**功能必不可少。

需要在主頁收藏的**中搜尋。

單獨開啟搜尋頁面。

首頁頭部增加搜尋框、搜尋按鈕。 

流程圖：

搜尋，有兩個引數傳遞路徑。

let keyword = this


.searchform.keyword.trim();


if (keyword == "") 



//


url中傳遞引數


this.$router.push(});



created() ,

mounted()
搜尋header中呼叫父元件中的方法**如下：

search() 


//子元件呼叫父元件方法


this.$emit('search', keyword);


}
需要呼叫父元件中的search方法。父元件在引用子元件時進行監聽。**如下：

父元件需要實現onsearch方法，獲取引數，並呼叫後端方法，**如下：


onsearch(keyword) ).then((res) => 


else


} else


}).catch(function


(error) );


}
6、後端搜尋功能實現。目前資料量較小，**資料儲存在mysql中，使用mysql進行檢索，按照name、remark、tag進行like匹配。後續計畫使用elasticsearch實現全文檢索。


highlight(content) 


let keyword = this


.searchform.keyword;


//匹配關鍵字正則


let replacereg = new regexp(keyword, 'g');


//高亮替換v-html值


let replacestring = '' + keyword + '';


//開始替換


return


content.replace(replacereg, replacestring);


}
2、html**中呼叫高亮方法。**如下：




				
實現搜尋功能
準備檢視函式search 修改base.html 中搜尋輸入框所在的 form action method get input type text placeholder 搜尋從這裡開始.style width 180px margin left auto height 30px padding l...

				
實現搜尋功能
準備檢視函式search search defsearch qu request.args.get q ques question.query.filter or question.title.contains qu question.detail.contains qu order by crea...

				
實現模糊搜尋功能
如果搜尋內容存在就出現類似上面的，相應內容顯示在下面 如果沒有匹配的內容無變化 html 所屬醫院 css searchdatajs function choose hospital id,name function searchlist param success function res sea...