本文标题的意思是实时的搜索页面中的文本相关的DOM元素，显示搜索到的实际部分并隐藏不相关的元素。看看这个例子：
如何实现？
非常的简单。让我们以FAQ页面为例，下面是页面结构：
<h1>FAQ</h1>
<div class="faq">
<input type="search" value="" placeholder="Type some keywords (e.g. giza, babylon, colossus)" />
<ul>
<li id="faq-1">
<h2><a href="#faq-1">Great Pyramid of Giza</a></h2>
<div>
<p>The Great Pyramid of Giza <!-- ... --></p>
<!-- ... -->
</div>
</li>
<li id="faq-2">
<h2><a href="#faq-2">Hanging Gardens of Babylon</a></h2>
<div>
<p>The Hanging Gardens of Babylon <!-- ... --></p>
<!-- ... -->
</div>
</li>
<!-- ... -->
</ul>
<div class="faq__notfound"><p>No matches were found.</p></div>
</div>我下了一小段JavsScript来处理这个交互事件，它是这么实现的：
- 当页面加载的时候，脚本会把页面中的 li 元素索引存到浏览器内存中；
- 当用户在搜索区域输入内容时，脚本搜索对应的索引数据，并隐藏不相关的数据；如果没有相关的信息，则显示一条定义好的内容；
- 脚本通过文本替换来高亮显示匹配内容，如
babylon替换成了<span class="highlight">babylon</span>
下面自己来试一下吧：
如果JavaScript被禁止怎么办？
用户将无法看到结果，除非默认显示或者开发一种不实用JavaScript的方法。为了实现这一功能，仔细看下下面的代码：
<li id="faq-1"><a href="#faq-1">
锚文本标识符的作用是我们可以利用CSS伪元素选择器 :target：
.faq > ul > li:not( :target ) > div
{
display: none;
}另外，实时搜索功能也是不能用了的。但是你可以提供一种服务器端的搜索功能或者隐藏搜索域以免困扰用户。
<html class="no-js">
<head>
<!-- remove this if you use Modernizr -->
<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")})(document,window,0);</script>
</head>
</html>我给<html>标签添加了一个 no-js 的类名，<script>部分的功能是移除类名。如果浏览器的JavaScript功能被禁止，则类名不会被移除，因此：
.no-js .faq input
{
display: none;
}no-js 是一个非常方便的技术，你可以在任何站点使用它。
改善用户体验
如果用户的搜索结果只有一条记录的话，直接显示出该条结果的内容而不需要用户点击标题是一个很好的体验，你可以通过文章开头的GIF就明白我所说的了。
隐藏关键字
这里我们还可以添加一个过滤的功能。如果我的列表只有标题而没有内容的话，怎么实现即使标题中没有该词还能显示该条信息呢？比如我的文章标题是“JavaScript 实现的实时搜索功能”，而我想实现搜索“jQuery”也能显示出该文章呢？没错，就是给文章增加关键词，并通过CSS隐藏它们。
<li>
<h2><a href="/real-time-search-in-javascript">Real-Time Search in JavaScript</a></h2>
<p class="hidden-keywords">jquery filter input html css</p>
</li>.hidden-keywords
{
display: none;
}一个非常有用的小技巧。
在源代码中你可以看到两个版本，一个是需要依赖jQuery的，另一个则不需要。每个版本又都分为三部分，所以你可以选择你需要的代码放到你的代码中。
via：osvaldas
名哲 2015/08/21 09:01
这篇文章看起来很实用的，make了