输入一个字母时，搜索栏不显示所有相关结果答案

【问题标题】：search bar does not show all relevant results when one letter is entered输入一个字母时，搜索栏不显示所有相关结果
【发布时间】：2021-04-29 17:34:22
【问题描述】：

我正在尝试创建一个显示数组对象名称的搜索。输入的字母越多，搜索范围就越窄。但是，当我输入一封信时，它只显示一个结果，而 console.log 显示几个。上图是我输入字母“s”时想要的结果，但我希望它是 html 文本，但下图是结果。我似乎找不到问题，它发生在我的几个练习项目中，控制台能够检测到与输入的字母相关的所有名称，但 html 没有。请有人告诉我为什么文本没有显示以及如何修复它，如果这是一个新手错误，我很抱歉，我是一个 javascript 初学者，这是我的第一个个人练习项目。谢谢

    var students = [{
        name: `Elon Musk`,
        present: 'true'
    },{
        name: `Bruce Wayne`,
        present: 'false'
    },{
        name: `Steve Rogers`,
        present: 'true'
    },{
        name: `SpiderMan`,
        present: 'true'
    },{
        name: `John Snow`,
        present: 'false'
    }, {
        name: 'Sonic',
        present: `true`
    }, {
        name: `Johnny Silverhand`,
        present: `false`
    }
    ]

    var totalStudents = document.createElement("h2")
    totalStudents.textContent = `Total Students: ${students.length}`
    document.querySelector("body").appendChild(totalStudents)


    var numOfAbs = students.filter(function (student) {
        return student.present === "true"
    })

    var absDisplay = document.createElement("h2")
    absDisplay.textContent = `Number of students present not present: ${numOfAbs.length}`
    document.querySelector("body").appendChild(absDisplay)
    


    document.querySelector("#ClassReg").addEventListener("click", function() {
        students.forEach(function (student) {
            var studentNames = document.createElement("p")
            studentNames.textContent = `${student.name} - ${student.present}`
            document.querySelector("#register").appendChild(studentNames)
            
        })
    })


    document.querySelector("#search-text").addEventListener('input',function (e){
            students.forEach(function (student) {
                if (student.name.toLowerCase().includes(e.target.value.toLowerCase())) {
                    console.log(student.name)
                    document.querySelector("#register").innerHTML = ""
                    const logger = document.createElement("h4")
                    logger.textContent = student.name
                    document.querySelector("#register").appendChild(logger)
                }
            })
    })

    document.querySelector("#search-text").addEventListener('input', function (e) {
        students.forEach(function (student) {
            if (e.target.value.includes(student.name.toLowerCase())){
                student.present = 'true'
                console.log(student.present, student.name)
            }
        })})

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <button>Login</button>
    <button id="ClassReg">ClassReg</button>
    <input id="search-text" type="text" placeholder="Filter students">
    <div id="register">

    </div>
    <script src="/registerDB/script.js"></script>
</body>
</html>

【问题讨论】：

这实际上适用于我的 chrome 版本。你在什么浏览器上运行？

标签： javascript html arrays object dom

【解决方案1】：

看起来您正在清除每个循环上的 #register 的内容。我认为你的意思是在 for 循环之前有这一行：

document.querySelector("#register").innerHTML = ""

【讨论】：