使用javascript扩展搜索选项 [英] Extended search option with javascript
问题描述
我在我的网站上努力实现搜索功能，并且不知道如何从javascript开始。
I'm struggling to implement a search function on my website and don’t know how to start with this in javascript.
我想做什么：
输入内容时，例如foo，脚本应该在所有的HTML标记标签中搜索（标签都具有类searchopt）。
When typing in something, e.g. "foo", the script should search in all HTML markup-tags (the tags all have the class "searchopt").
现在脚本应该更改不包含搜索词（在本例中为foo）到类donotshow的标记标记。
Now the script should change the classes of the mark-up tags that do not contain the searched word (in this case "foo") to class "donotshow".
所有标记标签都不应该有新的类。
All mark-tags tags which do have the word "foo" inside should not get a new class.
如果在这个单词里面没有找到任何内容，那么没有类应该改变，但是在正文的顶部应该有一个文本，说没有找到任何内容。
有人帮我开始这个？
If nothing was found with this word inside, no classes should change, but there should be a text at the top of the body which says that nothing had been found.
Can someone help me get started with this?
推荐答案
只是为了让你开始
<!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值）。哨兵值由〜捕获。这种速度优化的交易是它的区分大小写。
Above we used indexOf as a way not to generate a new regex and use it. indexOf will return -1 (known as a sentinel value) when no result is found. Sentinel values are catched with ~. The trade-of for this speed optimization is that it's case-sensitive.
编辑：
不敏感的方式，我们不能再使用正则表达式闪避。因此，我们创建一个并将其设置为不区分大小写：
If we want to make this work in a case-insensitive way, we we can no longer dodge using a regex. So we create one and set it to case-insensitive:
<!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扩展搜索选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
