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

回答

相关问题