JS中模糊查询功能的一些常用方法
作者：刻刻帝的海角
在前端开发中,模糊查询与下拉匹配是提高用户体验的重要功能,特别是在搜索功能上,这篇文章主要给大家介绍了关于JS中模糊查询功能的一些常用方法,需要的朋友可以参考下
什么是模糊查询
模糊查询是指可以在不明确指定查询条件的情况下，自动查找与指定字符串相似的内容。例如，我们在搜索引擎中输入关键字时，就会出现相关的搜索结果，这就是利用了模糊查询功能。
在JS中，我们可以利用一些方法来实现对字符串的模糊查询。
JS字符串方法
在JS中，有一些字符串方法可以帮助我们实现模糊查询功能，下面来介绍一下几个常用的方法。
indexOf() 方法
indexOf() 方法用于定位一个字符串在另一个字符串中的位置，如果找到了，则返回该字符串的起始位置；否则，返回 -1。我们可以通过判断indexOf()方法的返回值是否大于等于0来判断是否找到了目标字符串。
let str = 'hello world';
let target = 'lo';
if (str.indexOf(target) >= 0) {
console.log('找到了目标字符串');
} else {
console.log('未找到目标字符串');
}
match() 方法
match() 方法用于在字符串中查找与指定正则表达式相匹配的子串，并返回一个数组。我们可以通过判断该数组的长度来判断是否找到了目标字符串。
let str = 'hello world';
let target = /lo/;
let result = str.match(target);
if (result && result.length > 0) {
console.log('找到了目标字符串');
} else {
console.log('未找到目标字符串');
}
search() 方法
search() 方法用于在字符串中查找与指定正则表达式相匹配的子串，并返回第一个匹配项的索引。类似于indexOf()方法，如果找到了，则返回该字符串的起始位置；否则，返回 -1。
示例说明
下面通过两个示例来说明如何使用JS实现模糊查询功能。
示例一：搜索关键字
在一个文本框中输入关键字，点击搜索按钮后，程序将搜索匹配的结果并显示在结果列表中。
HTML部分：
<div class="search-box"> <input type="text" id="search-input"> <button id="search-btn">搜索</button> </div> <div class="search-result"> <ul id="result-list"></ul> </div>
JS部分：
// 获取页面中的input框
let input = document.getElementById('search-input');
// 获取页面中的按钮
let button = document.getElementById('search-btn');
// 获取页面中的ul
let list = document.getElementById('result-list');
// 给input框绑定oninput监听事件
input.addEventListener('input', function() {
// 设置一个变量为input输入框中的值
let keyword = input.value;
// 创建一个有数据的数组
let data = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
// 创建一个空数据，用来存放筛选后的结果
let result = [];
// 遍历data
data.forEach(function(item) {
// 检查每一个keyword的值是否大于等于 0
if (item.indexOf(keyword) >= 0) {
// 如果keyword的值大于等于0，就把这个元素添加到result的数组中
result.push(item);
}
});
// 调用渲染result的函数
renderResult(result);
});
// 渲染result
function renderResult(data) {
// 声明一个空字符串
let html = '';
// 遍历data
data.forEach(function(item) {
// 空字符串+=li该元素
html += '<li>' + item + '</li>';
});
// ul中的内容等于这个字符串
list.innerHTML = html;
}
示例二：实时过滤列表
在一个文本框中输入关键字，程序将实时过滤列表中与关键字匹配的项，其他项隐身。
HTML部分：
<div class="list-box">
<input type="text" id="filter-input">
<ul id="list">
<li>apple</li>
<li>banana</li>
<li>orange</li>
<li>grape</li>
<li>watermelon</li>
</ul>
</div>
JS部分：
// 获取页面中的input
let input = document.getElementById('filter-input');
// 获取页面中的ul
let list = document.getElementById('list');
// 给input添加input事件监听
input.addEventListener('input', function() {
// 转换input大写为小写，并将其赋予给变量
let keyword = input.value.toLowerCase();
// 获取list下的所有li标签
let items = list.getElementsByTagName('li');
//将items转化为真正的数组并遍历
Array.prototype.forEach.call(items, function(item) {
// 转换item中文本的大小写
let text = item.innerText.toLowerCase();
// 如果text中keyword大于等于0
if (text.indexOf(keyword) >= 0) {
// 显示item
item.style.display = 'block';
} else {
// 否则隐藏item
item.style.display = 'none';
}
});
});以上就是关于JS中的模糊查询功能的攻略。
总结
到此这篇关于JS中模糊查询功能的一些常用方法的文章就介绍到这了,更多相关JS模糊查询功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！