1. 首頁
  2. 問答
  3. 突出顯示匹配輸入值輸入的div javascript

突出顯示匹配輸入值輸入的div javascript

2016-07-29 94 views
0

我正在嘗試使用輸入提交類型字段進行搜索。一旦用戶輸入內容，它應該查看div中的值。如果它匹配其中的一個，那麼它應該突出顯示黃色的div背景，如果它沒有在div列表的底部添加新值。突出顯示匹配輸入值輸入的div javascript

我能凸顯的背景它匹配的時候，但只突出停留一秒鐘，disappears.Also，它不列表中的「機器學習」的第二個元素相匹配。對於添加列表底部的第二部分，我嘗試推送列表中的新值，但這也不起作用。

有什麼建議嗎？

HTML和JS： `

function searchList() { 
 
    var searchCourse = document.getElementById("search").value; 
 

 
\t var courseList = document.getElementById("courselist").getElementsByTagName("DIV"); 
 

 
\t for(var i=0; i<courseList.length; i++) { 
 
\t \t var course = courseList[i]; 
 
\t \t var coursecheck = course.innerHTML; 
 
\t \t 
 
\t \t if(searchCourse == coursecheck){ 
 
\t \t \t course.style.backgroundColor = 'yellow'; 
 
\t \t } 
 

 
\t } 
 

 
}
<?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"> 
 
\t <head><title> SOEN 287 NEW Exercise </title> 
 
\t \t <style type="text/css"> 
 
\t \t \t fieldset {border:0px;} 
 
\t \t \t #courselist {width:300px;} 
 
\t \t \t #courselist div {border: 1px black solid;padding:10px;} 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <h2>Search a Course</h2> 
 
\t \t \t <form action="" method="post" onsubmit="return searchList()"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t Enter the Course Name<br /> 
 
\t \t \t \t \t <input type="text" id="search" size="20" /><br /> 
 
\t \t \t \t \t <input type="submit" value="Search List" id="sub" /> 
 
\t \t \t \t \t <br /><br /> 
 
\t \t \t \t </fieldset> 
 
\t \t \t </form> 
 
\t \t \t <div id="courselist"> 
 
\t \t \t \t <div id="first">&nbsp;</div> 
 
\t \t \t \t <div> Machine Learning </div> 
 
\t \t \t \t <div> Image Processing</div> 
 
\t \t \t \t <div>Design and Analysis of Algorithms</div> 
 
\t \t \t \t <div>Web Programming II </div> 
 
\t \t \t \t <div>Advanced JAVA</div> 
 
\t \t \t \t <div>Pattern Recognition</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <script type="text/javascript" src="main.js"></script> 
 
\t </body> 
 
</html>

來源

2016-07-29 Avinanda Chattapadday

+1

*「......但亮點僅停留一秒鐘消失」 * - 這是因爲提交按鈕被請求頁面刷新。你會希望通過在函數中執行'return false'或'event.preventDefault（）'來防止默認行爲。 –

回答

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/

我希望這會有所幫助。

來源

2016-07-29 04:36:28

+0

是的！非常感謝你，非常有幫助:) –

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">&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>

來源

2016-07-29 04:41:04 Sonia

+0

這實際上給了一個錯誤消息，但我發現了一個頂部工作的答案！ –

0

你能上的div添加data-value屬性？如果這樣你就可以做這樣的事情：

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"> 
 
\t <head><title> SOEN 287 NEW Exercise </title> 
 
\t \t <style type="text/css"> 
 
\t \t \t fieldset {border:0px;} 
 
\t \t \t #courselist {width:300px;} 
 
\t \t \t #courselist div {border: 1px black solid;padding:10px;} 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="container"> 
 
\t \t \t <h2>Search a Course</h2> 
 
\t \t \t <form action="" method="post" onsubmit="return searchList()"> 
 
\t \t \t \t <fieldset> 
 
\t \t \t \t \t Enter the Course Name<br /> 
 
\t \t \t \t \t <input type="text" id="search" size="20" /><br /> 
 
\t \t \t \t \t <input type="submit" value="Search List" id="sub" /> 
 
\t \t \t \t \t <br /><br /> 
 
\t \t \t \t </fieldset> 
 
\t \t \t </form> 
 
\t \t \t <div id="courselist"> 
 
\t \t \t \t <div id="first">&nbsp;</div> 
 
\t \t \t \t <div data-value='Machine Learning'>Machine Learning </div> 
 
\t \t \t \t <div data-value='Image Processing'>Image Processing</div> 
 
\t \t \t \t <div data-value='Design and Analysis of Algorithms'>Design and Analysis of Algorithms</div> 
 
\t \t \t \t <div>Web Programming II </div> 
 
\t \t \t \t <div>Advanced JAVA</div> 
 
\t \t \t \t <div>Pattern Recognition</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <script type="text/javascript" src="main.js"></script> 
 
\t </body> 
 
</html>

如果使按鈕與href='#something'一個鏈接，然後它不會重新加載頁面，或添加事件偵聽器的按鈕，然後執行event.preventDefault()

來源

2016-07-29 04:47:36 Sparkmasterflex

+0

謝謝你的回答！ –

相關問題

 相關問題