如何为两个歌曲列表制作菜单搜索栏？

我正在制作一个自己常听的歌曲列表，这个列表很快就会变得庞大，所以想加个搜索栏方便找歌，但大部分教程都帮不上忙。我找到一个最接近的实现思路，但需要适配我这种多层嵌套的列表结构。以下是我的简化版列表代码：

<ul style="border: 0.05cm solid whitesmoke; width: 40%; float: left; background-image: url(ah_strip_offic_pap.png); color: whitesmoke;">

  <li>PRINCESS QUEST
    <ul>
      <li><a href="#" style="color: springgreen;">Follow You</a> - Kyle Allen Music</li>
      <li><a href="#" style="color: springgreen;">You're the Key</a> - Kyle Allen Music</li>
      <li>
        <a href=""></a> - Kyle Allen Music</li>
    </ul>
  </li>

  <li>HAYLOFT
    <ul>
      <li><a href="#">Hayloft</a> - Mother Mother</li>
      <li><a href="#">Hayloft II</a> - Mother Mother</li>
    </ul>
  </li>

  <li>WELCOME HOME
    <ul>
      <li><a href="#">Welcome Home</a> - Hailey Lain
        <ul>
          <li><a href="#">(Remastered)</a> - Hailey Lain</li>
        </ul>
      </li>
      <li><a href="#">Behind the Curtain</a> - Hailey Lain</li>
    </ul>
  </li>

  <li>WOLVES
    <ul>
      <li><a href="#" style="color: springgreen;">Wolves</a> - NightCove_theFox</li>
      <li><a href="#" style="color: springgreen;">Far Too Long</a> - NightCove_theFox</li>
    </ul>
  </li>
</ul>

<ul style="border: 0.05cm solid whitesmoke; width: 40%; float: right; background-image: url(ah_strip_offic_pap.png); color: whitesmoke;">
  <li><a href="#" style="color: springgreen;">Love Taste</a> - Moe Shop
    <ul>
      <li><a href="#" style="color: springgreen;">(Remix)</a> - SadeN</li>
    </ul>
  </li>

  <li><a href="#" style="color: springgreen;">S.O.S (Source of Savagery)</a> - SharaX</li>
  <li><a href="#" style="color: springgreen;">world.execute(me);</a> - MILI</li>
  <li><a href="#">A Songus Amongus</a> - The Chalkeaters</li>
  <li><a href="#">My Time</a> - bo en</li>
  <li><a href="#" style="color: springgreen;">Secrets of Wysteria</a> - Steampianist
    <ul>
      <li><a href="#" style="color: springgreen;">(Reversed Ver.)</a> - Steampianist</li>
      <li><a href="#" style="color: springgreen;">(Cover)</a> - Lizz Robinett</li>
    </ul>
  </li>

  <li><a href="#">Hidden in the Sand</a> - Tally Hall</li>
  <li><a href="#">You Can't Hide</a> - CK9C</li>
  <li><a href="#" style="color: springgreen;">Love Me, Love Me, Love Me</a> - kikuo
    <ul>
      <li><a href="#" style="color: springgreen;">(English Cover)</a> - LittleJayneyCake</li>
    </ul>
  </li>

  <li><a href="#" style="color: springgreen;">As Above So Below</a> - KMODO</li>
  <li><a href="#" style="color: springgreen;">Isn't this Enough?</a> - xXtha</li>
  <li><a href="#" style="color: springgreen;">Kiss Me (Kill Me)</a> - JerryTerry</li>
</ul>

实现方案 #

直接给你适配嵌套列表的搜索功能代码，核心是实时监听输入，匹配歌曲条目并处理父级显示逻辑：

完整可运行代码 #

<!-- 新增搜索框 -->
<input type="text" id="songSearch" placeholder="搜索歌曲/歌手..." style="padding: 8px; width: 80%; margin: 10px 0;">

<!-- 你的歌曲列表（保持原结构不变） -->
<ul style="border: 0.05cm solid whitesmoke; width: 40%; float: left; background-image: url(ah_strip_offic_pap.png); color: whitesmoke;">
  <!-- 原列表内容 -->
</ul>
<ul style="border: 0.05cm solid whitesmoke; width: 40%; float: right; background-image: url(ah_strip_offic_pap.png); color: whitesmoke;">
  <!-- 原列表内容 -->
</ul>

<script>
const searchInput = document.getElementById('songSearch');
// 定位所有最内层的歌曲条目
const songItems = document.querySelectorAll('li:not(:has(ul))');

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.toLowerCase().trim();
  
  songItems.forEach(item => {
    const content = item.textContent.toLowerCase();
    const isMatch = content.includes(keyword);
    
    // 显示/隐藏当前歌曲
    item.style.display = isMatch ? 'block' : 'none';
    
    // 向上遍历父级，确保匹配歌曲的分类栏显示
    let parent = item.parentElement;
    while (parent && parent.tagName === 'UL') {
      const hasVisibleKids = Array.from(parent.children).some(child => child.style.display !== 'none');
      parent.style.display = hasVisibleKids || keyword === '' ? 'block' : 'none';
      parent = parent.parentElement;
    }
  });
  
  // 清空搜索时恢复所有内容显示
  if (!keyword) {
    document.querySelectorAll('li, ul').forEach(el => el.style.display = 'block');
  }
});
</script>

功能说明 #

• 支持搜索歌曲名、歌手名，不区分大小写
• 匹配到的歌曲会保留显示，未匹配的隐藏
• 如果某分类下有匹配歌曲，该分类的父级列表会自动显示，不会被隐藏
• 清空搜索框后，所有内容自动恢复显示

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