是的,所以我设法拼凑了一些在我的网页中搜索功能方面有效的东西,但是如果我搜索"Amethyst",它也会将"Placeholder 1"分组到搜索中.

这里可能缺少一些非常明显的东西,但我会在这里放一小段代码,不足以重新创建,但这相当简单.

var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction(e) {
  var filter = e.target.value.toUpperCase();

  var list = document.getElementById("products");
  var divs = list.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    var a = divs[i].getElementsByTagName("a")[0];

    if (a) {
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        divs[i].style.display = "";
      } else {
        divs[i].style.display = "none";
      }
    }
  }

}
<input type="text" id="myInput" placeholder="Search" onkeyup="myFunction()" style="font-size:20px; padding-left: 15px;">



<div id="products" class=" w3-row w3-grayscale" style="width:100%">
      
 <div class="w3-col l3 s6">
       <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\amethyst1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
          </div>
        </div>
        <p>Amethyst<br>£45.00</p>
      </div></a>
     
      <a href="#"><div class="w3-container">
        <div class="w3-display-container">
          <img src="C:\Users\Harrison Gobey\Downloads\Dice\bloodstone1.png" style="width:100%">
          <div class="w3-display-middle w3-display-hover">
            <button class="w3-button w3-black">Buy now <i class="fa fa-shopping-cart"></i></button>
          </div>
        </div>
        <p>Placeholder1<br>£0.00</p>
      </div></a>
</div> 

注意:这不足以复制任何东西,但我相当确定问题在于这段代码.

如果你还有什么需要帮助的地方我忽略了,请告诉我.谢谢

推荐答案

这里的主要问题是,您试图获得e.target.value.toUpperCase()的值,这是未定义的.您实际需要的是大写值myInput,因为这是您希望在HTML内容中找到的值.

下面是对脚本的重构,使用querySelector和现有的HTML内容,这将起作用(以及更高效的for循环).此代码将只查看包含描述的段落标记.

<script>
var input = document.getElementById("myInput");
input.addEventListener("input", myFunction);

function myFunction() {

  var filter = document.getElementById("myInput").value.toUpperCase();
  
  var paragraphs = document.querySelectorAll("#products div a p")
  
  for (let i=0, p; p = paragraphs[i]; i++)
  {
     if (p.innerHTML.toUpperCase().indexOf(filter) > -1)
     {
        p.parentElement.parentElement.style.display = "block";
    }
    else
    {
        p.parentElement.parentElement.style.display = "none";
    }
  }
}
</script>

Javascript相关问答推荐

显示图—如何在图例项上添加删除线效果?

JS—删除对象数组中对象的子对象

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

使用原型判断对象是否为类的实例

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

为什么JPG图像不能在VITE中导入以进行react ?

将异步回调转换为异步生成器模式

在SHINY R中的嵌套模块中,不能使用Java代码

按什么顺序接收`storage`事件?

如何访问此数组中的值?

ngOnChanges仅在第二次调用时才触发

每隔3个项目交替显示,然后每1个项目交替显示

JavaScript -复制到剪贴板在Windows计算机上无效

使用API调用的VUE 3键盘输入同步问题

在ChartJS中使用spanGaps时,是否获取空值的坐标?

我如何才能获得价值观察家&对象&S的价值?

如何调整下拉内容,使其不与其他元素重叠?

JAVASCRIPT|导入模块中断FOR循环

我怎样才能让我的时间停下来,这样我的精灵在时间到了之后就不会互相攻击了?

功能中的析构与react 组件中的析构的区别