js模糊查询

最新推荐文章于 2023-12-09 13:39:27 发布

CQXXTXX

最新推荐文章于 2023-12-09 13:39:27 发布

阅读量304

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/CQXXTXX/article/details/127837120

版权

在学习js时制作出来的功能，知道现在也非常实用，不管是练习还是实战项目基本上都可以遇到的功能，自己写出来以后还是非常好理解的

代码如下：

<html>

<head>
<style type="text/css">
.inp{
margin-left: 5%;
}
.inp li{
list-style: none; 
}
</style>
</head>

<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..." class="inp">
<div class="inp">
<h2>东部联盟</h2>
<p>东南赛区：</p>

<ul id="ul">
<p><a href="https://www.nbalx.com/team/">nba录像网</a></p>
<li><a href="https://www.nbalx.com/team/huangfeng/">夏洛特黄蜂队</a></li>
<li><a href="https://www.nbalx.com/team/rehuo/">迈阿密热火队</a></li>
<li><a href="https://www.nbalx.com/team/moshu/">奥兰多魔术队</a></li>
<li><a href="https://www.nbalx.com/team/qicai/">华盛顿奇才队</a></li>
<li><a href="https://www.nbalx.com/team/laoying/">亚特兰大老鹰队</a></li>
<p>中部赛区：</p>
<li><a href="https://www.nbalx.com/team/xionglu/">密尔沃基雄鹿队</a></li>
<li><a href="https://www.nbalx.com/team/buxingzhe/">印第安纳步行者队</a></li>
<li><a href="https://www.nbalx.com/team/huosai/">底特律活塞队</a></li>
<li><a href="https://www.nbalx.com/team/gongniu/">芝加哥公牛队</a></li>
<li><a href="https://www.nbalx.com/team/qishi/">克利夫兰骑士队</a></li>
<p>大西洋赛区</p>
<li><a href="https://www.nbalx.com/team/menglong/">多伦多猛龙队</a></li>
<li><a href="https://www.nbalx.com/team/qiliuren/">费城76人对</a></li>
<li><a href="https://www.nbalx.com/team/kaierteren/">波士顿凯尔特人队</a></li>
<li><a href="https://www.nbalx.com/team/lanwang/">布鲁克林篮网队</a></li>
<li><a href="https://www.nbalx.com/team/nikesi/">纽约尼克斯队</a></li>
<h2>西部联盟</h2>
<p>太平洋赛区</p>
<li><a href="https://www.nbalx.com/team/taiyang/">尼菲克斯太阳队</a></li>
<li><a href="https://www.nbalx.com/team/yongshi/">金州勇士队</a></li>
<li><a href="https://www.nbalx.com/team/huren/">洛杉矶湖人队</a></li>
<li><a href="https://www.nbalx.com/team/kuaichuan/">洛杉矶快船队</a></li>
<li><a href="https://www.nbalx.com/team/guowang/">萨克拉门托国王队</a></li>
<p>西北赛区</p>
<li><a href="https://www.nbalx.com/team/juejin/">丹佛掘金队</a></li>
<li><a href="https://www.nbalx.com/team/leiting/">俄克拉荷马雷霆队</a></li>
<li><a href="https://www.nbalx.com/team/kaituozhe/">波特兰开拓者队</a></li>
<li><a href="https://www.nbalx.com/team/jueshi/">犹他爵士队</a></li>
<li><a href="https://www.nbalx.com/team/senlinlang/">明尼苏达森林狼队</a></li>
<p>西南赛区</p>
<li><a href="https://www.nbalx.com/team/huojian/">休斯顿火箭队</a></li>
<li><a href="https://www.nbalx.com/team/maci/">圣安东尼奥马刺队</a></li>
<li><a href="https://www.nbalx.com/team/huixiong/">孟菲斯灰熊队</a></li>
<li><a href="https://www.nbalx.com/team/duxingxia/">达拉斯独行侠队</a></li>
<li><a href="https://www.nbalx.com/team/tihu/">新奥尔良鹈鹕队</a></li>
</ul>
</div>
<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";
}
}
}
</script>
</body>

</html>