CSS + JS + Vue 实现搜索下拉列表

在许多应用中，实时搜索并显示下拉列表是一个常见的功能。用户可以输入搜索关键字，然后从下拉列表中选择一项。以下是一个使用 Vue.js、CSS 和 JavaScript 实现的简单示例。

Vue 组件

创建一个名为 SearchDropdown.vue 的组件：

<template>
  <div class="search-container">
    <input type="text" v-model="query" @input="search" placeholder="搜索..." />
    <ul v-if="results.length > 0" class="search-results">
      <li v-for="(result, index) in results" :key="index" @click="selectItem(result)">
        {{ result.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: "",
      items: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Cherry" },
        // 更多数据...
      ],
      results: [],
    };
  },
  methods: {
    search() {
      if (this.query) {
        this.results = this.items.filter((item) =>
          item.name.toLowerCase().includes(this.query.toLowerCase())
        );
      } else {
        this.results = [];
      }
    },
    selectItem(item) {
      this.query = item.name;
      this.results = [];
      // 在这里，你可以执行其他操作，例如导航到该项的详情页
      alert(`你选择了 ${item.name}`);
    },
  },
};
</script>

<style scoped>
.search-container {
  position: relative;
}

.search-results {
  position: absolute;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.search-results li {
  padding: 10px;
  cursor: pointer;
}
</style>

解释

1. 数据和状态: 我们有一个 query 用于存储用户输入的搜索查询，一个 items 数组用于存储所有可搜索的项，以及一个 results 数组用于存储搜索结果。

2. 搜索逻辑: 我们定义了一个 search 方法，该方法会根据用户输入的 query 来过滤 items。

3. 选择项: 我们定义了一个 selectItem 方法，当用户点击一个搜索结果时，该方法会被触发。在这个示例中，我们简单地将选中项的名称设置为查询，并清空搜索结果。

4. 样式: 我们使用简单的 CSS 来布局搜索框和下拉列表。

这个组件实现了基础的搜索下拉列表功能。你可以根据需要进行更多的定制和扩展。希望这个简单的示例能帮助你实现你需要的功能！