Javascript 如何创建按类名筛选的搜索

我目前有一个网站，有多个项目。它们都是单独的div项目。它们都有一个类名和几个其他类名作为标记，以帮助将它们分开。一些标记在多个div项中是通用的

我已经设置了使用data filter=.exampleclass和data filter=.exampleclass2等的按钮，它们非常适合根据类名进行排序。我现在正在尝试制作一个搜索栏，用户可以在其中键入类名，这样我就不必为所有类名制作按钮

document.getElementById("boxsearch").oninput = function() {
  var matcher = new RegExp(document.getElementById("boxsearch").value, "gi");
  for (var i = 0; i < document.getElementsByClassName("portfolio-item").length; i++) {
    if (matcher.test(document.getElementsByClassName("category")[i])) {
      document.getElementsByClassName("portfolio-item")[i].style.display = "inline-block";
    } else {
      document.getElementsByClassName("portfolio-item")[i].style.display = "none";
    }
  }
}

我没有包含jquery文件，所以按钮不起作用。我只是不知道如何使用搜索栏来搜索类名

---

这是我所能找到的最接近我试图实现的目标的方法：

基于正则表达式匹配的元素与其类名之一进行过滤是一种效率低下的元素过滤方法。通常，你会建立一个索引，并使用一个更优化的搜索算法

您可以使用一个类来选择目标元素集，然后循环它们并获取它们的类列表，然后循环那些寻找匹配项的元素，下面是一个示例。但这也将测试与过滤或排序无关的其他类名，例如，在下面的示例中，box仅用于显示，但元素仍由它过滤

更好的办法可能是将过滤器和排序值添加为数据属性，这样就可以将它们与其他副作用隔离开来。我还建议建立主题元素的索引，这样你就可以先找到你想要的，然后隐藏它们

多个getElementByClassName调用代价高昂且不必要，尤其是在for循环中。该示例对每个keyup执行一次调用

函数filterOnClassbaseClass，s{ 设re=new RegExps.trim，‘i’； document.querySelectorAll'.+baseClass.forEachnode=>{ 让cNames=Array.fromnode.classList； //如果搜索字符串为空，则显示全部 如果s.trim=={ node.classList.remove'hide'； //否则，请过滤 }否则，如果cNames.somecName=>re.testcName{ node.classList.add'hide'； }否则{ node.classList.remove'hide'； } }; } .盒子{ 高度：50px； 宽度：100px； 边框：1px纯蓝色； } .隐藏{ 显示：无； } 福 富吧 烟吧

---

Java之于Javascript，犹如痛苦之于绘画，火腿之于仓鼠。他们完全不同。强烈建议有抱负的程序员尝试学习他们试图编写代码的语言的名称。当您发布问题时，请适当地标记它。发布的代码不使用jQuery，并且您没有包含jQuery标记。问为什么这项工作不能在问题中包含足够的代码来复制问题的问题。请参阅。@RobG您说过我的代码不使用jQuery，也没有jQuery标记。这没有任何意义，如果它不使用jQuery，那么我就不需要这个标记。我提供了足够的代码来回答我的问题。您的代码应该包括jQuery以复制问题，因为它是使问题正常工作所必需的，并且您应该包括jQuery标记，因为需要jQuery。另外，请详细说明您当前的代码是如何工作的。Jquery对于已经工作的部分是必需的，对于我需要帮助的部分并不重要。关于那部分我没有问题。我只需要知道如何使用javascript通过搜索栏调用类名。如果它需要jQuery，那么我不知道。