JavaScript实现的一个简单的模糊查询数据
主要的应用场景就是:当后端搜索模块代码还没写完时,可以模拟前端搜索功能
<!DOCTYPE html>
<html lang="en">
<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>
#div1 {
width: 200px;
height: 200px;
padding: 50px;
background-color: lightgray;
border: 1px solid black;
margin: 100px auto
}
#word {
width: 200px;
height: 30px;
font-size: 18px;
}
#desc {
width: 200px;
height: 150px;
margin-top: 20px;
padding: 10px;
background-color: lightgreen;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">
<input id='word' type="text" placeholder="输入关键词" />
<div id='desc'></div>
</div>
<script>
const data = ['连衣裙', '裙子', '背带裙', '高腰裙', '裤子', '鞋子', '鞋带', '鞋底']
window.onload = function () {
var oWord = document.getElementById("word");
var oDesc = document.getElementById("desc");
const fuzzySearch = (list, search) => {
//list 是已有的数据,search 是模糊搜索的关键字
let data = [];
if (list.length != 0 && search) {
let str = `\S*${search}\S*`;
let reg = new RegExp(str, 'i');//不区分大小写
list.map(item => {
if (reg.test(item)) {
data.push(item);
}
})
}
return data;
}
oWord.onchange = function () {
let searchResult = fuzzySearch(data, this.value)
console.log(searchResult);
if (searchResult.length) {
oDesc.innerHTML = searchResult.join("<br/>");
} else {
oDesc.innerHTML = "无匹配项";
}
}
}
</script>
</body>
</html>