[Vue3+Ts]实现搜索框，下拉框是历史记录

下面是一个简单的示例代码，实现了一个搜索框和下拉框，下拉框中显示最近的搜索历史记录：

<template>
  <div class="search-box">
    <input type="text" v-model="keyword" placeholder="请输入搜索关键字" @input="handleInput" />
    <ul v-if="showList">
      <li v-for="(item, index) in historyList" :key="index" @click="handleItemClick(item)">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      keyword: '',
      showList: false,
      historyList: ['搜索历史1', '搜索历史2', '搜索历史3'], // 假设这是搜索历史记录
    };
  },
  methods: {
    handleInput() {
      this.showList = true; // 输入时显示下拉框
    },
    handleItemClick(item: string) {
      this.keyword = item; // 点击下拉框中的历史记录，将其设置为搜索关键字
      this.showList = false; // 隐藏下拉框
    },
  },
});
</script>

这里的 `historyList` 就是保存搜索历史记录的数组，每次用户输入时，都会将其设置为下拉框中的选项。当用户点击某个历史记录时，就可以将其设置为搜索关键字，并隐藏下拉框。

当然，这只是一个简单的示例，你可以根据实际需求进行修改和扩展。