前言
假如数组中有100首歌曲；
有个需求是您要让用户尽可能少输入文字就能通过模糊搜索找到该首歌
实际上，模糊搜索的功能非常常见了，通过该功能，我们也很方便的用最短的时间找到需要的数据；
网上找到有说通过 For 循环来进行遍历，也有通过对每一项进行 split(value) 传入 value 关键字进行判断来实现；
当然，我看到最好的办法就是通过 fitter 进行每一项的 indexOf 查询是最合理的操作了；下面是一个简短模糊匹配的函数方法
function selectArrDataFn(value) {
if (!value.trim()) return arr;
return arr.filter(item => {
return item.indexOf(value) !== -1
});
}
filter 会遍历数组，会过滤出其每一项中 返回值为 true 的结果，最后为 过滤出的项 生成一个新的数组并返回；
.
我们在遍历每一项的操作中，使用 indexOf 来判断传入的 vaule 关键字是否存在在该项；若不在，返回 -1 ，若在，就是除 -1 以外的下标的值；我们因此只要判断 值 是否等于 -1 即可知道该项是否存在关键字
实现
因此通过该方式，我做了一个简单的搜索案例：
1.gif
下方是完整代码，借鉴学习：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.w {
width: 70%;
max-width: 600px;
margin: 10px auto;
}
.search {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 3px dashed #66cc;
}
.content {
display: flex;
flex-direction: column;
border: 3px dashed #66cc;
box-sizing: border-box;
padding: 15px 10px;
}
.content li {
height: 35px;
list-style: none;
font-size: 24px;
line-height: 35px;
padding: 0 20px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="search w">
<input type="text" id="search">
<button id="btn">搜索</button>
</div>
<ul class="content w" id="content">
</ul>
<script>
const ul = document.querySelector('#content');
const search = document.querySelector('#search');
const btn = document.querySelector('#btn');
let arr = ['张三', '张天虎', '张娜拉', '刘田', '李欢', '张小泉', '蔡徐坤', '魏天启', '蔡依林'];
changeHtml(arr);
function changeHtml(arr) {
let htmlStr = '';
arr.forEach(item => {
htmlStr += `<li>${item}</li>`;
});
ul.innerHTML = htmlStr;
}
function selectArrDataFn(value) {
if (!value.trim()) return arr;
return arr.filter(item => {
return item.indexOf(value) !== -1
});
}
btn.addEventListener('click', function () {
const value = search.value;
changeHtml(selectArrDataFn(value));
});
</script>
</body>
</html>
