搜索页的实现：防抖与 wx.request 取消请求**

前端

2023-09-21 09:18:07

在搜索中实现模糊搜索和标红

前言

我们在上一篇博客中建立了搜索页面的基本布局和数据获取功能。在本篇中，我们将进一步深入探讨，实现模糊搜索和搜索结果中的关键字标红展示功能。通过使用防抖函数和 wx.request 中的取消请求，我们将优化用户体验并提高代码效率。

模糊搜索的实现

模糊搜索允许用户输入一个关键字，并基于该关键字获取相关搜索结果。其原理是将用户输入的关键字与数据库中的数据进行匹配，并返回匹配度最高的搜索结果。

为了实现模糊搜索，我们需要使用防抖函数来限制搜索请求的频率。防抖函数是一种技术，它可以防止在短时间内连续触发多个函数调用，从而避免不必要的请求和服务器资源浪费。

防抖函数

以下是一个防抖函数的简单实现：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

该函数接受两个参数：要执行的函数 (fn) 和一个延迟时间 (delay)。当用户触发搜索输入事件时，防抖函数会执行以下操作：

如果之前有一个计时器，则将其清除。
设置一个新的计时器，并在 delay 毫秒后执行 fn 函数。

wx.request 取消请求

在模糊搜索中，用户可能会快速输入多个关键字。为了避免产生不必要的重复请求，我们可以使用 wx.request 中的 abort 方法来取消之前发起的请求。

wx.request 的 abort 方法可以中止正在进行的请求。当我们收到新的搜索输入时，我们可以先取消之前的请求，然后再发起新的请求。

以下是如何使用 abort 方法取消请求的示例：

// 之前请求的请求对象
let requestTask = null;

function search(query) {
  if (requestTask) requestTask.abort();
  requestTask = wx.request({
    url: '...',
    data: {
      query: query
    },
    success: res => {
      // 处理搜索结果
    }
  });
}

关键字标红的实现

关键字标红功能会在搜索结果中将与用户输入关键字匹配的文本加粗显示。其原理是遍历搜索结果，找到与关键字匹配的文本，并将其替换为加粗文本。

以下是实现关键字标红的示例代码：

// 搜索结果中的关键字标红
for (let i = 0; i < results.length; i++) {
  const result = results[i];
  result.title = result.title.replace(query, `<b>${query}</b>`);
}

实现步骤

要实现模糊搜索和关键字标红功能，需要遵循以下步骤：