javascript - 类似于 Google Chrome 的网站的查找栏

Question

你能推荐一个可以像这样的代码吗？我尝试在我的网站上实现谷歌搜索栏，但是当我搜索时，它只是打开谷歌和谷歌在我的网站上缓存的页面，我想要的功能就像谷歌浏览器的这个查找栏，它只会搜索整个页面，例如，当我输入"A"结果285 "A"时，页面上有。您可能会说我应该只使用浏览器中的内置查找栏，问题是 Firefox 和其他浏览器的查找栏的功能与谷歌浏览器不相似，这就是为什么我正在寻找可以与此类似，可以在其他浏览器上使用。

Answer 1

这是可能对您有用的代码。这使用正则表达式来搜索字符串。您可能需要修改 RegEx 和它搜索的 DOM 节点以提高效率。不包括任何突出结果的逻辑。只计算出现次数并显示计数。

在这里工作演示：http: //jsfiddle.net/ZCUvE/

HTML

​<div class="search">
    <input type="text" id="search" value="" placeholder="Search" />
    <span id="results"></span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.search {
    width: 40%;
    background: #999;
    position: fixed;
    right: 0;
    top: 0;
    padding: 8px;
}
#results {
    background: #DDD;
    font-size: 0.9em;
    display: inline-block;
    padding: 1px 3px;
    display: none;
}

JavaScript

​$("#search").on("keyup", function()​ {
    if(this.value) {
        var results = 0;
        $("body").children().each(function() {
            var re = new RegExp($("#search").val(), "gi");
            var matches = $(this).text().match(re);
            results += matches ? matches.length : 0;
        });
        $("#results").text(results+ " matches").show();
    }
    else {
        $("#results").hide();
    }
});​

这只是一个开始的基本实现。请让我知道这对你有没有用。