JavaScript动态创建DOM元素调用charAt()失效 姓名搜索功能异常求助

• 核心问题1：你用模板字符串生成<li>时，标签内姓名前后加了大量换行和缩进空格，直接取textContent的第一个字符拿到的是空白符，不是姓名首字符，匹配自然全部失败。
• 次要问题：缺少输入为空的兼容逻辑，当用户清空搜索框时应当直接展示所有姓名。

你只需要在读取li文本内容时加trim()去除首尾空白即可，同时补充输入为空的处理：

names = ["Ayesha", "Alina", "Bilal", "Kaira", "Per", "Henry", "Liba", "Rimsha"]

let ulEl = document.getElementById("ul-el")
let searchInput = document.getElementById("searchInput");

function render(things) {
  let listItems = ""
  for (let i = 0; i < things.length; i++) {
    listItems += `
            <li class="names">
                    ${things[i]}
            </li>
        `
  }
  ulEl.innerHTML = listItems
}

render(names)

searchInput.addEventListener("keyup", function(event) {
  let inputVal = event.target.value.trim().toLowerCase();
  // 输入为空直接显示所有姓名
  if (!inputVal) {
    document.querySelectorAll('.names').forEach(el => el.style.display = "block")
    return
  }
  let searchQuery = inputVal.charAt(0);
  let allNamesDOMCollection = document.getElementsByClassName('names');

  for (let i = 0; i < allNamesDOMCollection.length; i++) {
    // 加trim()去掉前后空白，再取首字符
    let currentNameFirstChar = allNamesDOMCollection[i].textContent.trim().toLowerCase().charAt(0);
    allNamesDOMCollection[i].style.display = currentNameFirstChar === searchQuery ? "block" : "none";
  }
})

• 可以直接基于原names数组做筛选后重新调用render()渲染，比直接操作DOM的显示隐藏逻辑更清晰，也不会受DOM内空白字符的影响。
• 用querySelectorAll替代getElementsByClassName，返回的静态NodeList遍历更稳定，不会因为DOM变化出现遍历异常。

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