清空搜索输入后结果列表出现额外逗号项，如何恢复初始显示状态？

问题原因 #

• 多余逗号：Array.map()返回的是数组类型，直接赋值给innerHTML时，数组默认会用逗号拼接所有元素生成字符串，逗号就被渲染为页面内容。
• 清空输入未恢复初始状态：没有对搜索值为空的场景做处理，且选中学校后设置的li隐藏、弹窗内边距修改没有重置。

修复方案 #

修改搜索输入框的keyup监听逻辑，所有渲染场景都用join('')把数组转为无分隔符字符串，同时补充空搜索值的重置逻辑：

document.querySelector("#search-input").addEventListener("keyup", (e) => {
  const searchString = e.target.value.toLowerCase()
  // 搜索为空时恢复初始状态
  if (searchString === '') {
    results.innerHTML = dummyData.map(school => `
      <ul>
        <li>${school.name}</li>
      </ul>
    `).join('')
    // 重置选中后的样式修改
    $('li').attr('style', 'display:flex')
    $('#school-popup-content').attr('style', 'padding-bottom:80px')
    return
  }
  const filteredSchools = dummyData.filter((school) => {
    return school.name.toLowerCase().includes(searchString)
  })
  let filtered = filteredSchools.map((school) => {
    return `
<ul>
<li>${school.name}</li>
</ul>
`
  }).join('')
  results.innerHTML = filtered
})

其他优化建议 #

初始化渲染学校列表时不要给所有li设置相同的id="list-item"，id属性在DOM中必须唯一，建议删除该重复id避免后续选择器异常。

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