javascript - 使用 JavaScript Bootstrap 在页面中搜索

Question

我将使用 Bootstrap 构建一个页面，并使用导航栏搜索表单在同一页面中查找搜索到的文本。我应该使用什么 JS 脚本来做到这一点？我希望对于页面中的每个找到的文本，脚本都会像这样将类“lead”添加到 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如果您希望人们搜索一些愚蠢的东西，您可能希望在将其插入正则表达式之前将其转义。

JSFiddle