Sortable/Searchable List with Javascript

所以我使用這個如何from w3schools，但我想搜索整個<li>而不僅僅是<a>標籤。我可以看到這是問題a = li[i].getElementsByTagName("a")[0];但我無法弄清楚如何改變它？Sortable/Searchable List with Javascript

這裏是他們的標記：

<ul id="myUL"> 
     <li><a href="#">Adele</a></li> 
     <li><a href="#">Agnes</a></li> 
    </ul>

但我想這一點：

<input type="text" id="myInput" onkeyup="myFunction()" 
    placeholder="Search for names.."> 

    <ul id="myUL"> 
     <li><a href="#">Adele</a> - Some more text that gets picked up by 
     search.</li> 
     <li><a href="#">Agnes</a> - Some more text that gets picked up by 
     search.</li> 
    </ul>

而這裏的腳本：

<script> 
    function myFunction() { 
    // Declare variables 
    var input, filter, ul, li, a, i; 
    input = document.getElementById('myInput'); 
    filter = input.value.toUpperCase(); 
    ul = document.getElementById("myUL"); 
    li = ul.getElementsByTagName('li'); 

    // Loop through all list items, and hide those who don't match the   
    search query 
    for (i = 0; i < li.length; i++) { 
      a = li[i].getElementsByTagName("a")[0]; 
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
       li[i].style.display = ""; 
      } else { 
       li[i].style.display = "none"; 
      } 
     } 
    } 
    </script>

來源

2017-06-20 Valerie

你只需要replave的一個標記在indexof l中國家統計局通過以下

if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {

你可以看看在工作實例在這裏，但我並沒有改變任何造型我只是改變它搜索

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
     a = li[i].getElementsByTagName("a")[0]; 
 
     if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      li[i].style.display = ""; 
 
     } else { 
 
      li[i].style.display = "none"; 
 

 
     } 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#myInput { 
 
    background-image: url('/css/searchicon.png'); 
 
    background-position: 10px 12px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 12px; 
 
} 
 

 
#myUL { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li a.header { 
 
    background-color: #e2e2e2; 
 
    cursor: default; 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}

<h2>My Phonebook</h2> 
 

 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 

 
<ul id="myUL"> 
 
    <li><a href="#" class="header">A</a></li> 
 
    <li><a href="#">Adele</a>some other funcky text</li> 
 
    <li><a href="#">Agnes</a></li> 
 

 
    <li><a href="#" class="header">B</a></li> 
 
    <li><a href="#">Billy</a></li> 
 
    <li><a href="#">Bob</a></li> 
 

 
    <li><a href="#" class="header">C</a></li> 
 
    <li><a href="#">Calvin</a></li> 
 
    <li><a href="#">Christina</a></li> 
 
    <li><a href="#">Cindy</a></li> 
 
</ul>

來源

2017-06-20 03:02:47

Sortable/Searchable List with Javascript

回答

相關問題