<html>
<head>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">
<ul id="ul">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Angel</a></li>
<li><a href="#">Adobe</a></li>
<li><a href="#">Anne</a></li>
<li><a href="#" class="header">B</a></li>
<li><a href="#">Betty</a></li>
<li><a href="#">Bella</a></li>
<li><a href="#">Brown</a></li>
<li><a href="#" class="header">C</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Chris</a></li>
<li><a href="#">Claire</a></li>
<li><a href="#" class="header">D</a></li>
<li><a href="#">David</a></li>
<li><a href="#">Daniel</a></li>
<li><a href="#">Dora</a></li>
<li><a href="#" class="header">E</a></li>
<li><a href="#">Emily</a></li>
<li><a href="#">Elena</a></li>
<li><a href="#">Eufemia</a></li>
</ul>
<script>
function myFunction() {
// 声明变量
var input, upperInputValue, ul, li, a, i;
input = document.getElementById('myInput');
// 将input值转换成大写
upperInputValue = input.value.toUpperCase();
ul = document.getElementById("ul");
li = ul.getElementsByTagName('li');
// 循环所有列表，查找匹配项
for (i = 0; i < li.length; i++) {
// 获取到所有a标签
a = li[i].getElementsByTagName("a")[0];
console.log(a.innerHTML.toUpperCase().indexOf(upperInputValue))
if (a.innerHTML.toUpperCase().indexOf(upperInputValue) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
// 将input的值和li标签所有的值都转换成大写进行判断 通过indexOf()检索看看是否存在
</script>
</body>
</html>
