第在vue項目實現(xiàn)一個ctrl+f的搜索功能

這次在項目中遇到了一個要做一個搜索功能，因為項目是vue的，而且是在手機端，所以對這個搜索功能的實現(xiàn)和能做到什么樣子都沒有底，在網(wǎng)上研究了一會，發(fā)現(xiàn)大家的解決方法都各有特色，有引入第三方包的，有遍歷的，確實都可以實現(xiàn)，但我覺得在vue中這樣的方法也太過繁瑣了，于是經(jīng)過一段時間的查詢與思索后我自己寫了個簡單的方法，并記錄下自己思索的過程

第一步

明確尋求產(chǎn)品的一萬種奇怪要求

對于開發(fā)來說，應(yīng)該要知道自己需要什么，不需要什么，理解pm的需求，把功能以最符合ue的樣子呈現(xiàn)出來，而這次的功能需求是非常簡單明了的，一個搜索框，底下是文章，搜索框輸入的時候動態(tài)標紅，按下回車會跳到標紅的位置，簡單明了

第二步

尋找靈感百度救我

對于已經(jīng)有過開發(fā)經(jīng)驗的人來說，可能把自己以前的代碼拿去復(fù)用就可以解決問題，但對于我這種第一次開發(fā)的菜雞來說，對搜索功能的實現(xiàn)竟然毫無頭緒，這種在身邊隨處可見的功能，竟然沒有細想過具體的實現(xiàn)流程，幸好，現(xiàn)代人的視野就是搜索引擎的視野，去百度上轉(zhuǎn)了一圈之后，見到了各種各樣的方法，但他們都有一個共同點，太復(fù)雜了，復(fù)雜到我看到就有點不太想用，雖然我是那種雖然代碼能成功運行就等于沒問題的三流選手，但是看到太過復(fù)雜的代碼也很影響我一天的心情，所以我選擇了更為簡單的方法

第三步

進入開發(fā)bug的無數(shù)種奇怪煉成方式

首先我的代碼結(jié)構(gòu)如下：

template

div

div>

搜索內(nèi)容把對應(yīng)內(nèi)容變?yōu)榧t色的函數(shù)就是changeColor

changeColor(item){

letsearchitem=this.searchitem;//獲取動態(tài)變化的搜索詞

if(searchitem!==){//若搜索詞不為空，對搜索詞進行替換

returnitem.replace(newRegExp(searchitem,g),a>

到此，動態(tài)輸入標紅搜索詞的功能已經(jīng)做好了，但是搜索框還有一個回車事件我覺得在實際上也應(yīng)該有點用，比如跳到第一個關(guān)鍵詞什么的，這個時候，我又看見了一個神奇的方法

document.getElementsByTagName(a).scrollIntoView();

當頁面可以支持滑動時，scrollIntoView可以把對于元素滑倒頁面頂部（默認），也可以通過參數(shù)賦值給false讓對應(yīng)元素賦值到底部，僅支持原生js，jQuery中沒有這個方法，那么問題來了，我上面替換出了那么多a標簽，怎么能讓他們排好隊一個一個被調(diào)用了，那當然只能遍歷了，但是原生js中沒有jQuery中eq那樣的選擇器，怎么才能讓js知道我要找的是第n個a標簽?zāi)?/p>

submit(){

letnum=document.getElementsByTagName(a).length;//獲取所有a標簽的數(shù)量，這個頁面所有的a標簽都是由查詢替換獲得的，所以a標簽的數(shù)量可以當場查詢到關(guān)鍵詞的數(shù)量

if(num!=0){//如果查詢關(guān)鍵詞存在，跳到第一個關(guān)鍵詞的位置，標頭增1，走滿一圈歸0

document.getElementsByTagName(a)[this.searchhead].scrollIntoView();//scrollIntoView方法只在原生document中可以使用，jquery中沒有這個方法，參數(shù)默認是true，將這個元素置于頁面第一行（如果頁面可以滑動函數(shù)才生效）

if(this.searchhead(num-1)){

this.searchhead+=1;

}elseif(this.searchhead==(num-1)){

this.searchhead=0;

原來，getElementsByTagName(a)返回的是帶有指定標簽名的對象的集合。通過對數(shù)組的序列的調(diào)用就可以完成對方法的依次調(diào)用。

至此，這個簡單頁面