返回

用Select组件征服分页模糊搜索：精进你的编码实践

前端

在我们日常编码实践中，后端接口往往以分页且支持模糊搜索的形式出现。此时，我们需要用Select组件来展示列表数据，同时赋予其搜索能力。接下来，让我们踏上征服之旅，掌握用Select组件消费分页模糊搜索接口的精髓。

需求场景

后端提供了分页且支持模糊搜索的接口，我们的任务是使用Select组件呈现列表数据，并集成搜索功能。

技术选型

毫无疑问，Select组件是展示列表数据的理想之选。它的强大之处在于能够轻松实现多选、单选和模糊搜索。配合分页接口，我们可以创建高效、用户友好的数据展示界面。

HTML结构

<div>
  <label for="select">选择选项：</label>
  <select id="select">
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
  </select>
</div>

这段HTML代码创建了一个Select组件，其中包含三个选项。

JavaScript实现

const selectElement = document.getElementById('select');

// 初始化分页查询
let currentPage = 1;
let pageSize = 10;

// 监听输入框变化，触发搜索
selectElement.addEventListener('input', (event) => {
  // 获取输入框的值作为搜索关键词
  const searchTerm = event.target.value;

  // 调用分页模糊搜索接口
  fetch(`api/search?q=${searchTerm}&page=${currentPage}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
      // 清空现有选项
      selectElement.innerHTML = '';

      // 遍历搜索结果，创建新选项
      data.items.forEach(item => {
        const option = document.createElement('option');
        option.value = item.id;
        option.textContent = item.name;
        selectElement.appendChild(option);
      });
    });
});

// 监听页面滚动，触发分页加载更多数据
window.addEventListener('scroll', () => {
  // 判断是否滚动到页面底部
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // 当前页码加 1
    currentPage++;

    // 重新触发搜索，加载下一页数据
    selectElement.dispatchEvent(new Event('input'));
  }
});

这段JavaScript代码实现了搜索和分页功能。它监听输入框变化，根据输入的搜索词调用分页模糊搜索接口。然后，它使用搜索结果更新Select组件中的选项。另外，它还监听页面滚动，在滚动到页面底部时自动加载更多数据。

示例代码

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div>
    <label for="select">选择选项：</label>
    <select id="select">
      <option value="1">选项 1</option>
      <option value="2">选项 2</option>
      <option value="3">选项 3</option>
    </select>
  </div>

  <script>
    const selectElement = document.getElementById('select');

    // 初始化分页查询
    let currentPage = 1;
    let pageSize = 10;

    // 监听输入框变化，触发搜索
    selectElement.addEventListener('input', (event) => {
      // 获取输入框的值作为搜索关键词
      const searchTerm = event.target.value;

      // 调用分页模糊搜索接口
      fetch(`api/search?q=${searchTerm}&page=${currentPage}&pageSize=${pageSize}`)
        .then(response => response.json())
        .then(data => {
          // 清空现有选项
          selectElement.innerHTML = '';

          // 遍历搜索结果，创建新选项
          data.items.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name;
            selectElement.appendChild(option);
          });
        });
    });

    // 监听页面滚动，触发分页加载更多数据
    window.addEventListener('scroll', () => {
      // 判断是否滚动到页面底部
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        // 当前页码加 1
        currentPage++;

        // 重新触发搜索，加载下一页数据
        selectElement.dispatchEvent(new Event('input'));
      }
    });
  </script>
</body>
</html>

SEO优化