0

このようなコードをお勧めできますか？サイトに Google 検索バーを実装しようとしましたが、検索すると、Google と Google がサイトにキャッシュしたページが開きます。必要な機能は、ページ全体のみを検索する Google Chrome の検索バーのようなものです。 、たとえば、入力"A"したときに結果が285 "A"ページに表示されます。ブラウザから組み込みの検索バーを使用する必要があると言うかもしれませんが、問題はFirefoxの検索バーの機能であり、他のブラウザはGoogle chromeに似ていないため、できるコードを探していますこれに似ていて、他のブラウザでも使用できます。

ここに画像の説明を入力

4

1 に答える 1

1

これがあなたのために働くかもしれないコードです。これは、正規表現を使用して文字列を検索します。より効率的にするために、正規表現とそれが検索する 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();
    }
});​

これは、開始するための基本的な実装にすぎません。それがあなたのために働くかどうか私に知らせてください。

于 2012-10-24T05:54:05.900 に答える