快捷導(dǎo)航

JS中模糊查詢功能的一些常用方法

更新時(shí)間：2024年06月20日 09:31:52 作者：刻刻帝的海角

在前端開發(fā)中,模糊查詢與下拉匹配是提高用戶體驗(yàn)的重要功能,特別是在搜索功能上,這篇文章主要給大家介紹了關(guān)于JS中模糊查詢功能的一些常用方法,需要的朋友可以參考下

什么是模糊查詢

模糊查詢是指可以在不明確指定查詢條件的情況下，自動(dòng)查找與指定字符串相似的內(nèi)容。例如，我們?cè)谒阉饕嬷休斎腙P(guān)鍵字時(shí)，就會(huì)出現(xiàn)相關(guān)的搜索結(jié)果，這就是利用了模糊查詢功能。

在JS中，我們可以利用一些方法來實(shí)現(xiàn)對(duì)字符串的模糊查詢。

JS字符串方法

在JS中，有一些字符串方法可以幫助我們實(shí)現(xiàn)模糊查詢功能，下面來介紹一下幾個(gè)常用的方法。

indexOf() 方法

indexOf() 方法用于定位一個(gè)字符串在另一個(gè)字符串中的位置，如果找到了，則返回該字符串的起始位置；否則，返回 -1。我們可以通過判斷indexOf()方法的返回值是否大于等于0來判斷是否找到了目標(biāo)字符串。

let str = 'hello world';
let target = 'lo';

if (str.indexOf(target) >= 0) {
  console.log('找到了目標(biāo)字符串');
} else {
  console.log('未找到目標(biāo)字符串');
}

match() 方法

match() 方法用于在字符串中查找與指定正則表達(dá)式相匹配的子串，并返回一個(gè)數(shù)組。我們可以通過判斷該數(shù)組的長度來判斷是否找到了目標(biāo)字符串。

let str = 'hello world';
let target = /lo/;

let result = str.match(target);

if (result && result.length > 0) {
  console.log('找到了目標(biāo)字符串');
} else {
  console.log('未找到目標(biāo)字符串');
}

search() 方法

search() 方法用于在字符串中查找與指定正則表達(dá)式相匹配的子串，并返回第一個(gè)匹配項(xiàng)的索引。類似于indexOf()方法，如果找到了，則返回該字符串的起始位置；否則，返回 -1。

示例說明

下面通過兩個(gè)示例來說明如何使用JS實(shí)現(xiàn)模糊查詢功能。

示例一：搜索關(guān)鍵字

在一個(gè)文本框中輸入關(guān)鍵字，點(diǎn)擊搜索按鈕后，程序?qū)⑺阉髌ヅ涞慕Y(jié)果并顯示在結(jié)果列表中。

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監(jiān)聽事件
			input.addEventListener('input', function() {
				// 設(shè)置一個(gè)變量為input輸入框中的值
				let keyword = input.value;
				// 創(chuàng)建一個(gè)有數(shù)據(jù)的數(shù)組
				let data = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
				// 創(chuàng)建一個(gè)空數(shù)據(jù)，用來存放篩選后的結(jié)果
				let result = [];
				// 遍歷data
				data.forEach(function(item) {
					// 檢查每一個(gè)keyword的值是否大于等于 0
					if (item.indexOf(keyword) >= 0) {
						// 如果keyword的值大于等于0，就把這個(gè)元素添加到result的數(shù)組中
						result.push(item);
					}
				});
				// 調(diào)用渲染result的函數(shù)
				renderResult(result);
			});
			// 渲染result
			function renderResult(data) {
				// 聲明一個(gè)空字符串
				let html = '';
				// 遍歷data
				data.forEach(function(item) {
					// 空字符串+=li該元素
					html += '<li>' + item + '</li>';
				});
				// ul中的內(nèi)容等于這個(gè)字符串
				list.innerHTML = html;
			}

示例二：實(shí)時(shí)過濾列表

在一個(gè)文本框中輸入關(guān)鍵字，程序?qū)?shí)時(shí)過濾列表中與關(guān)鍵字匹配的項(xiàng)，其他項(xiàng)隱身。

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事件監(jiān)聽
			input.addEventListener('input', function() {
				// 轉(zhuǎn)換input大寫為小寫，并將其賦予給變量
				let keyword = input.value.toLowerCase();
				// 獲取list下的所有l(wèi)i標(biāo)簽
				let items = list.getElementsByTagName('li');
				//將items轉(zhuǎn)化為真正的數(shù)組并遍歷 
				Array.prototype.forEach.call(items, function(item) {
					// 轉(zhuǎn)換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';
					}
				});
			});

以上就是關(guān)于JS中的模糊查詢功能的攻略。