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。

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

if (str.search(target) >= 0) {
  console.log('找到了目标字符串');
} else {
  console.log('未找到目标字符串');
}

示例说明

下面通过两个示例来说明如何使用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部分：

let input = document.getElementById('search-input');
let button = document.getElementById('search-btn');
let list = document.getElementById('result-list');

button.addEventListener('click', function() {
  let keyword = input.value;
  let data = ['apple', 'banana', 'orange', 'grape', 'watermelon'];
  let result = [];

  data.forEach(function(item) {
    if (item.indexOf(keyword) >= 0) {
      result.push(item);
    }
  });

  renderResult(result);
});

function renderResult(data) {
  let html = '';

  data.forEach(function(item) {
    html += '<li>' + item + '</li>';
  });

  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部分：

let input = document.getElementById('filter-input');
let list = document.getElementById('list');

input.addEventListener('input', function() {
  let keyword = input.value.toLowerCase();
  let items = list.getElementsByTagName('li');

  Array.prototype.forEach.call(items, function(item) {
    let text = item.innerText.toLowerCase();

    if (text.indexOf(keyword) >= 0) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
});

以上就是关于JS中的模糊查询功能的攻略。