I would like to modify the code I saw on the W3school and the code is to generate a filter/ search function. the original code is
<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
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];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
The code below is meant to compare the input with the data-caption attribute of the anchor element but it does not work. Can anyone kindly point out what is wrong? Thanks so much!
function search() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('search-input');
filter = input.value.toUpperCase();
ul = document.getElementById('search-opt');
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0].getAttribute('data-caption');
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Try removing the .getAttribute('data-caption')
, maybe it helps because W3Schools doesn't use it in their code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.