Question

我正在努力在我的网站上实现搜索功能，并且不知道如何在javascript中启动它。

我正在尝试做什么：

输入内容时，例如“foo”，脚本应该搜索所有HTML标记标签（标签都有“searchopt”类。）

现在，脚本应该将不包含搜索词（在本例中为“foo”）的标记标记的类更改为“donotshow”类。

做的所有mark-tags标签里面都有“foo”这个词不应该是新的类。

如果内部没有找到任何内容，那么任何课程都不应该改变，但是身体顶部应该有一个文字说没有找到任何内容。
有人可以帮助我开始这个吗？

Answer 1

只是为了让你开始

<!DOCTYPE html>
<html><head><title>Homework</title>

<style>
.searchopt {display:block;}
.donotshow {display:none;}
</style>

</head><body>

Search: <input type="text" onkeyup="
  for( var elms= document.getElementById('content')
                         .getElementsByTagName('p')
       ,      L= elms.length
       ,  found= 0
     ; L--
     ; elms[L].className= ~elms[L].textContent.indexOf(this.value)
                        ? found='searchopt'
                        : 'donotshow'
     );
  this.nextSibling.innerHTML= found ? '' : ' not found' ;
"><span></span><div id="content">
<p class="searchopt">The lazy gray fox crawled under the old tree.</p>
<p class="searchopt">It was a pretty old fox.</p>
<p class="searchopt">This is why he was gray.</p>
</div>

</body></html>

上面我们使用indexOf作为而不是的方式来生成新的正则表达式并使用它。如果未找到结果，indexOf将返回-1（称为哨兵值）。使用~捕获Sentinel值。这种速度优化的交易是它区分大小写。

修改

如果我们想以不区分大小写的方式完成这项工作，我们就不能再使用正则表达式来躲避。所以我们创建一个并将其设置为不区分大小写：

<!DOCTYPE html> <html><head><title>Homework</title> <style> .searchopt {display:block;} .donotshow {display:none;} </style> </head><body> Search: <input type="text" onkeyup=" for( var elms= document.getElementById('content') .getElementsByTagName('p') , L= elms.length , found= 0 , rxp= new RegExp(this.value, 'i') ; L-- ; elms[L].className= rxp.test(elms[L].textContent) ? found='searchopt' : 'donotshow' ); this.nextSibling.innerHTML= found ? '' : ' not found' ; "><span></span><div id="content"> <p class="searchopt">The lazy gray fox crawled under the old tree.</p> <p class="searchopt">It was a pretty old fox.</p> <p class="searchopt">This is why he was gray.</p> </div> </body></html>

使用javascript扩展搜索选项

1 个答案: