如何突出显示在文档中键入搜索框的单词？

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无关。