Fatal编程技术网
  • javascript/
  • Javascript 搜索包含指定文本的div

Javascript 搜索包含指定文本的div

javascript jquery html css

Javascript 搜索包含指定文本的div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在我的网站上做一个搜索功能，在那里我搜索div（并省略不符合我搜索内容的div）。div列表如下所示： <body> <div class='subjects'> <div id='subject'>soccer</div> <div id='subject'>dancing</div> <div id='subject'>soap</div> </div> &

我想在我的网站上做一个搜索功能，在那里我搜索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'时，它只显示soap（不删除不匹配的div，只是不显示它们）

我真的没有搜索资料的经验，所以欢迎提供所有信息

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

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

HTML:

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

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

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

在POJS中，只关注现代浏览器（支持ECMA5和HTML5、IE10+）

CSS

HTML

需要POJS和跨浏览器（IE5.5+）

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);

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(" ");
    }
};

$("#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");
        }
    });
});

所有这些示例都使用CSS来设置div的样式，因此，如果您不想只显示/隐藏，但可能会高亮显示或放置边框，那么更改样式非常容易。

id='subject'3 place将它们更改为class:）您不能有多个id实例。另外，请检查这个有趣的问题，他在这个链接中仍然使用js，因此标题：“CSS中的客户端全文搜索”可能有点错误。是的。这只是一种更有趣的方法。：）您应该删除
显示：无；
，因为键入某个内容并在之后删除它将显示所有内容（通常我想显示所有内容）.这些只是你可以修改以适应你的项目的例子，你的具体问题我不清楚。 
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(" ");
    }
};

$("#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");
        }
    });
});