[自我提升]持续记录前端开发技巧

场景:根据用户输入的关键字在一个数组中的对象的 text 属性进行模糊查询匹配,可以在模糊查询函数中添加相应的逻辑。

关键词:防抖、模糊查询

数据类型:keyword(文本类型)、data(List)

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// 模糊查询函数
function fuzzySearch(keyword) {
  // 在这里执行模糊查询的逻辑
  console.log('模糊查询关键字:', keyword);
  
  // 假设你的数据数组为 data,其中每个对象都有 text 属性
  var data = [
    { text: 'Apple' },
    { text: 'Banana' },
    { text: 'Orange' },
    { text: 'Pineapple' },
    { text: 'Grapes' },
  ];
  
  // 进行模糊查询匹配
  var result = data.filter(function(obj) {
    return obj.text.toLowerCase().includes(keyword.toLowerCase());
  });
  
  // 输出匹配结果
  console.log('匹配结果:', result);
  
  // 根据匹配结果进行界面更新或其他操作
}

// 创建具有防抖和模糊查询功能的函数
var debouncedSearch = debounce(fuzzySearch, 300);

// 调用具有防抖和模糊查询功能的函数
debouncedSearch('key');

 

你可能感兴趣的:(前端总结,前端)