我正在尝试使用输入提交类型字段进行搜索。一旦用户输入内容，它应该查看div中的值。如果它匹配其中一个，那么它应该突出显示黄色的div背景，如果它不是我们在div列表的底部添加新值。
我能够在匹配时突出显示背景，但突出显示仅停留一秒并消失。此外，它与“机器学习”列表中的第二个元素不匹配。对于添加到列表底部的第二部分，我尝试在列表中推送新值，但这也不起作用。
有什么建议吗？
HTML和JS： `
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for(var i=0; i<courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
if(searchCourse == coursecheck){
course.style.backgroundColor = 'yellow';
}
}
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div> Machine Learning </div>
<div> Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
答案 0 :(得分：0)
请试试这个：
function searchList() {
var searchCourse = document.getElementById("search").value,
courseList = document.getElementById("courselist").getElementsByTagName("div"),
found = false;
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
//Get the the div content (course) and trim it
var coursecheck = course.innerHTML.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "");
if (searchCourse === coursecheck) {
course.style.backgroundColor = 'yellow';
//Match found so we don't need to add new element
found = true;
} else {
//Reset the background color
course.style.backgroundColor = 'transparent';
}
}
//New element add it to the list
if(!found) {
var newDiv = document.createElement("DIV");
newDiv.innerHTML = searchCourse;
document.getElementById("courselist").appendChild(newDiv);
}
return false;
}
演示： https://jsfiddle.net/iRbouh/jpor2eb3/
我希望这会有所帮助。
答案 1 :(得分：0)
请检查此代码。
的JavaScript
function searchList() {
var searchCourse = document.getElementById("search").value;
var courseList = document.getElementById("courselist").getElementsByTagName("DIV");
for (var i = 0; i < courseList.length; i++) {
var course = courseList[i];
var coursecheck = course.innerHTML;
console.log(coursecheck)
if (searchCourse == coursecheck) {
course.style.backgroundColor = 'yellow';
}
}
return false;
}HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div>Machine Learning </div>
<div>Image Processing</div>
<div>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
答案 2 :(得分：0)
你可以在div上添加<div style="display: none;">
<img src="https://suburl2.suburl1.url.com/c2/xyz/pagview?aasdasd" style="display:none" width="0" height="0">
</div>属性吗？如果是这样，你可以这样做：
data-valuefunction searchList() {
var searchCourse = document.getElementById("search").value,
highlight = document.querySelectorAll("[data-value='" + searchCourse + "']")[0] // <~~ only want the first
highlight.style.backgroundColor = 'yellow';
}
如果您将该按钮设为与<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> SOEN 287 NEW Exercise </title>
<style type="text/css">
fieldset {border:0px;}
#courselist {width:300px;}
#courselist div {border: 1px black solid;padding:10px;}
</style>
</head>
<body>
<div id="container">
<h2>Search a Course</h2>
<form action="" method="post" onsubmit="return searchList()">
<fieldset>
Enter the Course Name<br />
<input type="text" id="search" size="20" /><br />
<input type="submit" value="Search List" id="sub" />
<br /><br />
</fieldset>
</form>
<div id="courselist">
<div id="first"> </div>
<div data-value='Machine Learning'>Machine Learning </div>
<div data-value='Image Processing'>Image Processing</div>
<div data-value='Design and Analysis of Algorithms'>Design and Analysis of Algorithms</div>
<div>Web Programming II </div>
<div>Advanced JAVA</div>
<div>Pattern Recognition</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>的链接，则不会重新加载页面，或者向该按钮添加事件监听器并执行href='#something'