highlighting a div that matched input value entered javascript

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. For the second part for adding in the bottom of the list, I tried push the new value in the list but that didnt work either.

Any suggestions ?

HTML:

<?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>

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>

Replay

Category: javascript Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.146 (s). 12 q(s)