炫彩搜索：基于 CSS 打造灵动搜索体验

2023-09-27 06:01:37

在当今信息爆炸的时代，搜索功能已成为网站和应用程序的必备元素。一个美观、易用的搜索框可以帮助用户快速找到所需信息，从而提升用户体验。本文将介绍如何使用 CSS 实现搜索相关交互，包括清除按钮、搜索结果浮层和点击条目关闭浮层等。

清除按钮

清除按钮通常出现在搜索框右侧，当用户输入内容后，点击清除按钮即可清空输入框。我们可以使用 CSS 的 :focus 伪类来实现清除按钮的显示和隐藏。

/* 隐藏清除按钮 */
.search-box__clear {
  display: none;
}

/* 当输入框获得焦点时显示清除按钮 */
.search-box__input:focus ~ .search-box__clear {
  display: block;
}

搜索结果浮层

搜索结果浮层通常出现在搜索框下方，当用户输入内容并处于聚焦状态时，浮层会显示相关搜索结果。我们可以使用 CSS 的 position 属性来实现搜索结果浮层的显示和隐藏。

/* 隐藏搜索结果浮层 */
.search-results {
  display: none;
}

/* 当输入框获得焦点并且有内容时显示搜索结果浮层 */
.search-box__input:focus ~ .search-results {
  display: block;
}

点击条目关闭浮层

当用户点击搜索结果浮层中的某个条目时，浮层应该关闭。我们可以使用 CSS 的 pointer-events 属性来实现这一效果。

/* 允许浮层中的条目接收点击事件 */
.search-results__item {
  pointer-events: auto;
}

/* 当浮层中的条目被点击时，关闭浮层 */
.search-results__item:active ~ .search-results {
  display: none;
}

完整代码

<!DOCTYPE html>
<html>
<head>
  
  <style>
    /* 搜索框样式 */
    .search-box {
      position: relative;
      width: 200px;
    }

    .search-box__input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .search-box__clear {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      padding: 0;
      border: none;
      background: #ccc;
      border-radius: 50%;
      cursor: pointer;
      display: none;
    }

    /* 搜索结果浮层样式 */
    .search-results {
      position: absolute;
      top: 40px;
      left: 0;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      background: #fff;
      border: 1px solid #ccc;
      border-top: none;
      border-radius: 5px;
      display: none;
    }

    .search-results__item {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      pointer-events: auto;
    }

    .search-results__item:active {
      background: #eee;
    }

    /* 焦点样式 */
    .search-box__input:focus {
      border-color: #000;
    }

    .search-box__clear:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <div class="search-box">
    <input class="search-box__input" type="text" placeholder="搜索">
    <button class="search-box__clear" type="button">×</button>
  </div>

  <div class="search-results">
    <div class="search-results__item">结果 1</div>
    <div class="search-results__item">结果 2</div>
    <div class="search-results__item">结果 3</div>
  </div>

  <script>
    // 监听输入框的输入事件
    const input = document.querySelector('.search-box__input');
    input.addEventListener('input', () => {
      // 如果输入框中有内容，则显示清除按钮
      const clearButton = document.querySelector('.search-box__clear');
      if (input.value.length > 0) {
        clearButton.style.display = 'block';
      } else {
        clearButton.style.display = 'none';
      }

      // 如果输入框中有内容并且处于焦点状态，则显示搜索结果浮层
      const results = document.querySelector('.search-results');
      if (input.value.length > 0 && input === document.activeElement) {
        results.style.display = 'block';
      } else {
        results.style.display = 'none';
      }
    });

    // 监听清除按钮的点击事件
    const clearButton = document.querySelector('.search-box__clear');
    clearButton.addEventListener('click', () => {
      // 清空输入框的内容
      input.value = '';

      // 隐藏清除按钮
      clearButton.style.display = 'none';

      // 隐藏搜索结果浮层
      const results = document.querySelector('.search-results');
      results.style.display = 'none';
    });

    // 监听搜索结果浮层中条目的点击事件
    const results = document.querySelector('.search-results');
    results.addEventListener('click', (e) => {
      // 如果点击的是搜索结果浮层中的条目，则关闭浮层
      if (e.target.classList.contains('search-results__item')) {
        results.style.display = 'none';
      }
    });
  </script>
</body>
</html>