使用JavaScript实现HTML产品卡片列表搜索筛选：代码失效原因排查及非ul标签可行性咨询

Hey there! Let's tackle your two main questions and get that search feature working properly.

1. 必须使用<ul>标签实现列表搜索吗？ #

完全不需要！<ul>是语义化的列表标签，用来表示无序列表，但搜索过滤功能和你用什么容器标签没有绑定关系。你用<div>作为卡片的容器（就像你现在的代码一样）完全没问题，只要能正确定位到需要过滤的元素就行。教程里用<ul>只是常见的列表场景实践，不是硬性要求。

2. 你的代码无法运行的问题排查与修复 #

你的代码主要有几个关键问题，我来一一拆解并给出修复后的版本：

问题点： #

• 元素选择错误：ul.getElementsByTagName("card-content")是找名为card-content的标签，但card-content是class属性，不是标签名，这一步根本拿不到任何元素。
• 目标文本选错了：你代码里取的是card-content下的第一个<p>标签（也就是价格$100这类内容），但你需要搜索的是产品名称（带hippo类的<p>标签）。
• 遍历对象不合理：你应该遍历每个产品卡片的容器（比如每个.column元素），而不是card-content，这样才能控制整个卡片的显示/隐藏。

修复后的代码： #

JavaScript部分：

function myFunction() { 
  var input, filter, cards, card, productName, txtValue; 
  input = document.getElementById("myInput"); 
  filter = input.value.toUpperCase(); 
  // 获取所有产品卡片的容器（每个.column对应一个产品）
  cards = document.querySelectorAll("#myUL .column"); 
  
  for (var i = 0; i < cards.length; i++) { 
    // 找到当前卡片里的产品名称元素（带hippo类的p标签）
    productName = cards[i].querySelector(".hippo"); 
    txtValue = productName.textContent || productName.innerText; 
    // 判断产品名是否包含搜索关键词
    if (txtValue.toUpperCase().indexOf(filter) > -1) { 
      cards[i].style.display = "block"; 
    } else { 
      cards[i].style.display = "none"; 
    } 
  } 
}

HTML部分（注意补充闭合标签）：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
<div class="columns is-multiline" id="myUL"> 
  <div class="column is-one-fifth"> 
    <div class="card has-text-centered"> 
      <div class="card-content"> 
        <p>$100</p> 
        <p class="hippo">Playstation 5</p> 
      </div> 
      <footer class="card-footer"> 
        <p class="card-footer-item"> 
          <a href="" class="has-text-grey">View</a> 
        </p> 
        <p class="card-footer-item"> 
          <a href="" class="has-text-grey">Add to Cart</a> 
        </p> 
      </footer> 
    </div> 
  </div> 
  <div class="column is-one-fifth"> 
    <div class="card has-text-centered"> 
      <div class="card-content"> 
        <p>$250</p> 
        <p class="hippo">Xbox</p> 
      </div> 
      <footer class="card-footer"> 
        <p class="card-footer-item"> 
          <a href="" class="has-text-grey">View</a> 
        </p> 
        <p class="card-footer-item"> 
          <a href="" class="has-text-grey">Add to Cart</a> 
        </p> 
      </footer> 
    </div> 
  </div>
</div> <!-- 补充这个闭合标签，原代码里漏掉了 -->

修复说明： #

• 改用querySelectorAll来精准选择元素，这是现代JS中更灵活的元素选择方式。
• 遍历每个.column元素（整个产品卡片的容器），这样控制显示隐藏时会把整个卡片区域都隐藏。
• 准确获取带hippo类的产品名称标签，确保搜索的是正确的内容。
• 补充了HTML中遗漏的闭合标签，保证DOM结构正确。

内容的提问来源于stack exchange，提问作者whitetshirt