highlighting a div that matched input value entered javascript

Question

I am trying to make a search using an input submit type field. Once user enters something, it should look through the value in the divs. If it matches one of them then it should highlight that div background in yellow, if it doesnt we add the new value in the bottom of the div list.

I was able to highlight the background when it matches, but the highlight only stays for a second and disappears.Also, it doesn't match the second element of the list "Machine Learning". For the second part for adding in the bottom of the list, I tried push the new value in the list but that didn't work either.

Any suggestions ?

HTML and 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">&nbsp;</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>

Answer 1

Please try this:

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;
}

Demo: https://jsfiddle.net/iRbouh/jpor2eb3/

I hope this will help.

Answer 2

Please check this code.

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">&nbsp;</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>

Answer 3

Can you add a data-value attribute on the divs? if so you can do something like this:

 function 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">&nbsp;</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>

If you make the button a link with an href='#something' then it won't page reload, or add an event listener to the button and do event.preventDefault()

highlighting a div that matched input value entered javascript

Question

3 answers

solution1
0 ACCPTED 2016-07-29 04:36:28

solution2
0 2016-07-29 04:41:04

solution3
0 2016-07-29 04:47:36

highlighting a div that matched input value entered javascript

Question

3 answers

solution1 0 ACCPTED 2016-07-29 04:36:28

solution2 0 2016-07-29 04:41:04

solution3 0 2016-07-29 04:47:36

solution1
0 ACCPTED 2016-07-29 04:36:28

solution2
0 2016-07-29 04:41:04

solution3
0 2016-07-29 04:47:36