输入一个字母时，搜索栏不显示所有相关结果
Posted
技术标签:
【中文标题】输入一个字母时，搜索栏不显示所有相关结果【英文标题】：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 版本。你在什么浏览器上运行？ 【参考方案1】：看起来您正在清除每个循环上的 #register 的内容。我认为你的意思是在 for 循环之前有这一行：
document.querySelector("#register").innerHTML = ""
【讨论】：
以上是关于输入一个字母时，搜索栏不显示所有相关结果的主要内容，如果未能解决你的问题，请参考以下文章