JavaScript/jQuery中data属性值的精确与模糊搜索教程

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="searcher" placeholder="输入精确关键词...">
<ul>    
    <li class="items" data-search="A-plus">#À plus !</li>
    <li class="items" data-search="B-minus">#B minus !</li>
</ul>
<br>
结果:<br>
<div class="result"></div>

/**
 * 根据data-search属性值精确查找元素
 * @param {string} elem 要查找的元素选择器，如'.items'
 * @param {string} text 要匹配的data-search属性值
 * @returns {jQuery|string} 找到的元素的克隆副本或'<i>Not found!</i>'
 */
function findElementByText(elem, text) {
  // 使用属性选择器进行精确匹配
  const find = $(`${elem}[data-search="${text}"]`);
  if (find.length) {
    return find.clone(); // 返回找到元素的克隆副本
  }
  return '<i>未找到!</i>'; // 未找到时返回提示信息
}

// 监听输入框的输入事件
$(document).on('input', '.searcher', function() {
  // 将查找结果显示在.result区域
  $('.result').html( findElementByText( '.items', $(this).val() ) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入 Fuse.js 库 -->
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script> 

<input class="searcher" placeholder="输入模糊关键词...">
<ul>    
  <li class="items" data-search="A-plus">#À plus !</li>
  <li class="items" data-search="A-minus">#À minus !</li>
  <li class="items" data-search="Alpha">#Alpha !</li>
</ul>
<br>
结果:<br>
<ul class="result"></ul>

// 准备用于Fuse.js搜索的数据列表
const list = [];
$('.items').each(function() {
  list.push({
    title: $(this).data('search'), // 将data-search值作为搜索键
    el: $(this).clone() // 存储原始元素的克隆，以便后续显示
  });
});

// 初始化 Fuse.js
const fuse = new Fuse(list, {
  shouldSort: false, // 结果不排序，保持原始顺序
  threshold: 0.4,    // 模糊匹配的阈值，0表示精确匹配，1表示任意匹配
  keys: ['title']    // 指定要搜索的键，这里是数据对象中的'title'属性
});

// 监听输入框的输入事件
$(document).on('input', '.searcher', function() {
  const searchTerm = $(this).val();
  const results = fuse.search(searchTerm); // 执行模糊搜索

  $('.result').html(''); // 清空之前的搜索结果

  if (results.length) {
    // 如果有匹配结果，遍历并添加到结果区域
    results.map(o => $('.result').append(o.item.el));
  } else {
    $('.result').html('<i>未找到!</i>'); // 未找到时显示提示
  }
});