之前在网上搜一些关于前端模糊搜索的时候搜到的大部分都是些赋值粘贴过来的内容，毫无实际指导作用。所以我就自己用原生js写了一个前端模糊搜索的demo，方法有很多，我只是用我自己的方法逻辑写了一点。这里的话其实用到了一个小技巧就是用indexOf方法匹配一个空值的时候返回的是0而不是-1。
上代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模糊查询</title>
</head>
<style>
.wrap {
text-align: center;
max-width: 400px;
}
#newsBox {
display: inline-block;
text-align: left;
}
input{
width: 100%;
}
</style>
<body>
<div class="wrap">
<input type="text" id="demo">
<ul id="newsBox">
</ul>
</div>
</body>
<script type="text/javascript">
var data = ["百年南开：牢记嘱托立德树人","书写命运与共的世界故事100天后,世园会等你来","打造一支高素质政法队伍2019北京两会","跋山涉水接力跑——全面深化改革的“广东探索”",
"归途，开启家的记忆—写在2019年春运之际","春运大幕今开启 多部门联动将严打车闹座霸","人社部：已为38.9万农民工追发工资待遇57亿元","个人所得税APP更新,房屋出租人信息不用填了"]
var input = document.getElementById("demo");
var ul = document.getElementById("newsBox");
function creat() {
var value = input.value;
var html = "";
var newData = data.filter(item => {
if(item.indexOf(value) > -1){//indexOf方法中如果xxx.indexOf("")返回值为0
return item
}
return newData
})
if(newData.length > 0){
for(var i=0;i<newData.length;i++){
html += `<li>${newData[i]}</li>`
}
}else{
html += `<li>暂无数据</li>`
}
ul.innerHTML = html;
}
creat()
input.onchange = function (e) {
creat()
}
</script>
</html>
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
