javascript - JavaScript Bootstrap を使用したページ内検索

Question

Bootstrap でページを作成し、navbar-search フォームを使用して、同じページで検索されたテキストを見つけます。これを行うためにどのJSスクリプトを使用する必要がありますか? ページで見つかったすべてのテキストに対して、スクリプトはクラス「リード」を次のように p タグに追加します

    <p class="lead">...</p>

どうすればこれを行うことができますか? ありがとう。

Answer 1

Bootstrap がプラグインを機能させるには jQuery が必要なので、ソリューションに使用します。

あなたnavbar-searchがクラスの場合：

$(".navbar-search").on("keyup", function () {
    var v = $(this).val();
    $(".lead").removeClass("lead");
    $("p").each(function () {
        if (v != "" && $(this).text().search(v) != -1) {
            $(this).addClass("lead");
        }
    });
});

これは単語ではなく文字を検索することに注意してください (つまり、 say と入力し始めるとa、両方の段落に 'a' が含まれているため、両方の段落がすぐに選択されます)。単語を検索する場合は、それに応じてコードを修正する必要があります。

このソリューションでは、大文字と小文字が区別されます。

JSFiddle

したがって、単語全体を検索する場合は、次のようにします。

$(".navbar-search").on("keyup", function () {
    var v = $(this).val();
    $(".lead").removeClass("lead");
    var re = new RegExp("\\b" + v + "\\b","g")
    $("p").each(function () {
        if (v != "" && $(this).text().search(re) != -1) {
            $(this).addClass("lead");
        }
    });
});

v人々がばかげたものを検索することを期待する場合は、正規表現に挿入する前にyour をエスケープしたい場合があることに注意してください。

JSFiddle