搜索包含指定文本的 div

Question

我想在我的网站上创建一个搜索功能，在那里我搜索 div（并忽略不符合我搜索内容的 div。div 列表如下所示：

<body>
<div class='subjects'>
    <div id='subject'>soccer</div>
    <div id='subject'>dancing</div>
    <div id='subject'>soap</div>
</div>
</body>

例如，当我搜索“s”时，它不会显示里面跳舞的 div，而当你写“soa”时，它只显示肥皂（不删除不匹配的 div，只是不显示它们） .

我真的没有搜索东西的经验，所以欢迎所有信息。

ps。我添加的标签是可用的语言，如果我需要扩展：没问题。

Answer 1

您可以使用jQuery 来执行此操作，如下所示：

HTML：

<div class='subjects'>
    <div>soccer</div>
    <div>dancing</div>
    <div>soap</div>
</div>

<input type="text" id='search' />

jQuery：

$('#search').on('input', function(){
    var text = $(this).val();
    $('.subjects div').show();    
    $('.subjects div:not(:contains(' + text + '))').hide();
});

Fiddle

Answer 2

在 POJS 中，只关心现代浏览器（支持 ECMA5 & HTML5，IE10+）

CSS

.hide {
    display: none;
}

HTML

<input id="search"></input>
<div class="subjects">
    <div class="subject">soccer</div>
    <div class="subject">dancing</div>
    <div class="subject">soap</div>
</div>

javascript

document.getElementById("search").addEventListener("keyup", function (evt) {
    [].forEach.call(document.querySelectorAll(".subjects .subject"), function (subject) {
        if (subject.textContent.indexOf(evt.target.value) === -1) {
            subject.classList.add("hide");
        } else {
            subject.classList.remove("hide");
        }
    });
}, false);

jsfiddle

在 POJS 中需要跨浏览器 (IE5.5+)

javascript

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

function classNameToArray(className) {
    return className.split(/ +/);
}

function getElementsByClassName(node, className) {
    var array = [],
        elements = node.getElementsByTagName("*"),
        elementsLength = elements.length,
        i = 0,
        element,
        classNames,
        classNamesLength,
        x;

    while (i < elementsLength) {
        element = elements[i];
        classNames = classNameToArray(element.className);
        for (x = 0, classNamesLength = classNames.length; x < classNamesLength; x += 1) {
            if (classNames[x] === className) {
                array.push(element);
                break;
            }
        }

        i += 1;
    }

    return array;
}

document.getElementById("search").onkeyup = function (evt) {
    var e = evt || window.event,
        target = e.target || e.srcElement,
        subjects = getElementsByClassName(document, "subjects"),
        subject = [],
        classnames,
        classNamesLength,
        classIndex,
        element,
        length,
        index,
        text;

    for (index = 0, length = subjects.length; index < length; index += 1) {
        subject = subject.concat(getElementsByClassName(subjects[index], "subject"));
    }

    for (index = 0, length = subject.length; index < length; index += 1) {
        text = "";
        element = subject[index];
        walkTheDOM(element, function (currentNode) {
            if (currentNode.nodeType === 3) {
                text += currentNode.nodeValue;
            }
        });

        classNames = classNameToArray(element.className);
        for (classIndex = classNames.length - 1; classIndex >= 0; classIndex -= 1) {
            if (classNames[classIndex] === "hide") {
                classNames.splice(classIndex, 1);
            }
        }

        if (text.indexOf(target.value) === -1) {
            classNames.push("hide");
        }

        element.className = classNames.join(" ");
    }
};

jsfiddle

或在 jQuery 中（IE6+ 或 IE9+ 取决于 jQuery 版本）

javascript

$("#search").keyup(function (evt) {
    var subject = $(".subjects .subject");

    subject.removeClass("hide");
    subject.each(function (index, element) {
        var $element = $(element);

        if ($element.text().indexOf(evt.target.value) === -1) {
            $element.addClass("hide");
        }
    });
});

jsfiddle

所有这些示例都使用 CSS 来设置 div 的样式，因此如果您不想只显示/隐藏但可能要突出显示或放置边框，则可以很容易地更改样式。