vue3组件封装之搜索组件的封装，里面有下拉框

好的，下面是一个简单的搜索组件的封装，其中包含一个下拉框：

<template>
  <div class="search">
    <input v-model="keyword" @input="handleInput" placeholder="请输入关键字">
    <select v-model="selectedOption" @change="handleSelectChange">
      <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
    <ul v-if="showDropdown">
      <li v-for="(item, index) in filteredItems" :key="index" @click="handleItemClick(item)">{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    options: {
      type: Array,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      keyword: '',
      selectedOption: '',
      showDropdown: false
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.label.includes(this.keyword))
    }
  },
  methods: {
    handleInput() {
      this.showDropdown = true
    },
    handleSelectChange() {
      this.showDropdown = false
    },
    handleItemClick(item) {
      this.keyword = item.label
      this.showDropdown = false
    }
  }
}
</script>

<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 1;
}

li {
  padding: 5px 10px;
  cursor: pointer;
}

li:hover {
  background-color: #f2f2f2;
}
</style>

这个组件接受两个 props：`options` 和 `items`。其中，`options` 是一个下拉框的选项数组，每个选项包含一个 `label` 和一个 `value`。`items` 是一个搜索结果数组，每个结果包含一个 `label`。当用户输入关键字时，会根据关键字过滤出符合条件的搜索结果，并显示在下拉框中。用户可以通过下拉框选择一个结果，也可以手动输入关键字，然后点击搜索按钮进行搜索。