如何突出顯示在我的文檔中輸入到搜索框中的單詞？使用

Question

林下面的代碼從他們的網站

<nav> 
<div class="nav-wrapper"> 
    <form> 
    <div center class="input-field"> 
     <input id="search" type="search" required> 
     <label for="search"><i class="material-icons">search</i></label> 
     <i class="material-icons">close</i> 
    </div> 
    </form> 
</div> 
</nav> 

有沒有辦法通過網站進行搜索，並強調當用戶鍵入他們的話嗎？

Answer 1

您可以使用hilitor.js。

HTML：

<nav> 
    <div class="nav-wrapper"> 
    <form> 
     <div center class="input-field"> 
     <input id="search" type="search" required placeholder="Search..."> 
     <label for="search"></label> 
     </div> 
    </form> 
    </div> 
</nav> 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit praesentium ad placeat voluptates perspiciatis eaque odio non nisi impedit ea. Praesentium similique perferendis animi, cumque neque placeat deserunt facere ut.</p> 

CSS：

::-webkit-input-placeholder { 
    color: #fff; 
} 
::-moz-placeholder { 
    color: #fff; 
    opacity: 1; 
} 
:-ms-input-placeholder { 
    color: #fff; 
} 
input { 
    margin: 0; 
} 
p { 
    margin: 0; 
    padding: 15px 60px; 
    background: #d66367; 
    color: #fff; 
} 

JS：

var myHilitor2; 

document.addEventListener("DOMContentLoaded", function() { 
    myHilitor2 = new Hilitor("playground"); 
    myHilitor2.setMatchType("left"); 
}, false); 

document.getElementById("search").addEventListener("keyup", function() { 
    myHilitor2.apply(this.value); 
}, false); 

這裏是一個Codepen。

不要忘記包含hilitor.js。

下一次提供更好的主題名稱和標籤，因爲您的問題與materialize或materializecss無關。