如何使用 CSS Grid 布局实现实时搜索的功能-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 布局是一个强大的前端技术，可以帮助我们轻松构建复杂的布局和设计。在这篇文章中，我们将讨论如何使用 CSS Grid 布局实现实时搜索的功能。

步骤1：创建 HTML 结构

首先，我们需要创建一个基本的 HTML 结构，包含一个输入框和搜索结果列表，如下所示：

<div class="search-container">
  <input type="text" placeholder="Search">
  <ul class="search-results">
  </ul>
</div>

步骤2：使用 CSS Grid 布局

我们将使用 CSS Grid 布局来布局搜索结果列表。首先，在容器上设置 display: grid;，在此基础上，我们需要为容器定义一些网格行和网格列。

.search-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
}

在这里，我们设置了 grid-template-columns 为可自适应网格数目，但每个网格的最小宽度为 280 像素，并且应该尽可能地扩展填满容器。此外，我们设置了 grid-gap 为 20 像素，以在每个网格之间创建一些间距。

步骤3：添加搜索功能

现在我们已经设置好了布局，接下来我们需要添加搜索功能。我们将监听输入框的 input 事件，并使用 AJAX 请求从服务器获取数据。

// www.javascriptcn.com code example
const inputEl = document.querySelector('input');
const resultsEl = document.querySelector('.search-results');

inputEl.addEventListener('input', function() {
  const query = inputEl.value.trim();

  if (query.length >= 2) {
    fetch(`https://api.example.com/search?q=${query}`)
      .then(response => response.json())
      .then(results => {
        resultsEl.innerHTML = '';
        results.forEach(result => {
          const itemEl = document.createElement('li');
          itemEl.textContent = result.title;
          resultsEl.appendChild(itemEl);
        })
      })
  } else {
    resultsEl.innerHTML = '';
  }
});

这里我们使用 fetch API 发起 AJAX 请求，当输入框里输入的字符超过2个时，我们会从服务器获取数据，并使用 innerHTML 清空搜索结果列表，然后将新的结果插入其中。

步骤4：完整代码示例

// www.javascriptcn.com code example
<div class="search-container">
  <input type="text" placeholder="Search">
  <ul class="search-results">
  </ul>
</div>

<style>
  .search-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
  }
</style>

<script>
  const inputEl = document.querySelector('input');
  const resultsEl = document.querySelector('.search-results');

  inputEl.addEventListener('input', function() {
    const query = inputEl.value.trim();

    if (query.length >= 2) {
      fetch(`https://api.example.com/search?q=${query}`)
        .then(response => response.json())
        .then(results => {
          resultsEl.innerHTML = '';
          results.forEach(result => {
            const itemEl = document.createElement('li');
            itemEl.textContent = result.title;
            resultsEl.appendChild(itemEl);
          })
        })
    } else {
      resultsEl.innerHTML = '';
    }
  });
</script>

最后

使用 CSS Grid 布局实现实时搜索的功能，是一种简单又有力的方案，可以帮助我们快速制作出一个时髦且高效的搜索功能。通过这篇文章我们学习了如何使用 CSS Grid 布局有效地实现搜索结果列表，并使用 JS 自动监听搜索框内容变化，动态呈现出我们所需要展示的内容。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d01698e46428fe9eca9fac

如何使用 CSS Grid 布局实现实时搜索的功能

接着读