搜索包含指定文本的div
我想在我的网站上创建一个搜索function，在那里我搜索div（并省略不符合我搜索内容的div。字节列表如下所示：
soccer dancing soap 例如，当我搜索’s’时它没有显示内部跳舞的div，当你写’soa’时它只显示肥皂（不删除不匹配的div，只是不显示它们）。
我真的没有搜索内容的经验，所以欢迎所有信息。
PS。 我添加的标签是可用的语言，如果我需要扩展名：这没问题。
您可以使用jQuery来执行此操作，如下所示：
HTML：
soccer dancing soap
jQuery的：
$('#search').on('input', function(){ var text = $(this).val(); $('.subjects div').show(); $('.subjects div:not(:contains(' + text + '))').hide(); });
小提琴
在POJS中，只关心现代浏览器（支持ECMA5和HTML5，IE10 +）
CSS
.hide { display: none; }
HTML
soccer dancing soap
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的样式，因此如果您不想显示/隐藏但可能突出显示或放置边框，则可以很容易地更改样式。