Question

我想在我的网站上创建一个搜索功能，在那里我搜索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＆amp; 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的样式，因此如果您不想只显示/隐藏但可能突出显示或放置边框，则可以很容易地更改样式。

搜索包含特定文本的div

2 个答案: