这篇文章主要介绍了JavaScript怎么实现本地模糊搜索功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript怎么实现本地模糊搜索功能文章都会有所收获，下面我们一起来看看吧。
随着vue、react在实际开发中应运越来越广泛，前端对数据的处理越来越多。这篇文章主要目的就是为了对服务端返回的数据进行处理，按照条件进行模糊查询，从而减少向服务端发送请求的次数，来提高性能和用户体验。下面以一个简单的DEMO,来实现模糊查询的功能：
测试用的数据如下：
计算
安全
数据库
网络和加速
企业服务
var data = [{
"title": "你的失恋修复期有多长？",
"title_image": "https://img.doutuimao.net/dtmimg/b7c9ec393414982682e5a477eb995b55",
"desc": "美食餐饮测试一下你的失恋修复期有多长",
"id": "2",
"num": 951357,
"flag": "01"
},
{
"title": "你的撒娇指数有多高？",
"title_image": "https://img.doutuimao.net/dtmimg/60d8ed86d1f72357c194506270c72ac1",
"desc": "美食餐饮会撒娇的女人最好命，你有多会撒娇？你撒起娇来魅力又是怎么样的？快来测测吧！",
"id": "3",
"num": 963258,
"flag": "01"
},
{
"title": "你未来的结婚方式？",
"title_image": "https://img.doutuimao.net/dtmimg/538632e75159ce8e586778d289c66a11",
"desc": "相信很多人都对自己未来的结婚方式充满期待，想知道你未来的结婚方式吗？",
"id": "4",
"num": 879564,
"flag": "01"
},
]Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
// 处理原始数组
let arrnew = data.map((item, index) => {
return Object.assign({}, {
"desc": item.desc,
})
})filter()方法用于过滤数组元素。该方法创建一个新数组, 其中包含通过所提供函数实现的测试的所有元素。filter()不会对空数组进行检测，也不会改变原始数组。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。与filter()方法配合，可以检测数组中是否包含输入的值，并返回。
var newData = arrnew.filter(item => {
if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0
return item
}
return newData
})<div class="wrap">
<input type="text" id="demo">
<ul id="newsBox">
</ul>
</div>
function creat() {
var value = input.value;
var html = "";
let arrnew = data.map((item, index) => {
return Object.assign({}, {
"desc": item.desc,
})
})
var newData = arrnew.filter(item => {
if (item.desc.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].desc}</li>`
}
} else {
html += `<li>暂无数据</li>`
}
ul.innerHTML = html;
}
creat()
input.onchange = function(e) {
creat()
}关于“JavaScript怎么实现本地模糊搜索功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript怎么实现本地模糊搜索功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/zhying13/blog/4371579
