vue2 模拟百度输入框，输入信息展示查询结果列表，点击向上下箭头 自动选中查询列表中的项 并高亮显示 怎么实现

要实现这个功能，你需要先使用 Vue2 创建一个输入框组件，并在输入框中监听用户的输入事件。每次输入事件触发后，你可以向后台发送 AJAX 请求获取查询结果，然后将查询结果列表展示在输入框下方。

接下来，你需要在模板中使用 v-for 指令来循环渲染查询结果列表，并为每个查询结果项绑定点击事件。在点击事件中，你可以将当前点击的查询结果项的索引保存到 Vue 组件的 data 中，然后根据索引值来高亮显示选中的查询结果项。

最后，在键盘按下事件中，你可以监听用户按下向上或向下箭头键，然后根据当前选中的查询结果项的索引，来移动选中项的位置，并高亮显示选中项。具体实现可参考如下代码：

<template>
  <div>
    <input type="text" v-model="keyword" @input="search" @keydown.up="moveUp" @keydown.down="moveDown" />
    <ul>
      <li v-for="(item, index) in searchResult" :class="{ active: activeIndex === index }" @click="select(index)">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '',
        searchResult: [],
        activeIndex: -1
      }
    },
    methods: {
      search() {
        // 发送 AJAX 请求获取查询结果
        // 将查询结果保存到 this.searchResult 中
      },
      moveUp() {
        if (this.activeIndex > 0) {
          this.activeIndex--
        }
      },
      moveDown() {
        if (this.activeIndex < this.searchResult.length - 1) {
          this.activeIndex++
        }
      },
      select(index) {
        // 处理选中查询结果项的逻辑
      }
    }
  }
</script>

上述代码中，当用户按下向上或向下箭头键时，会触发 moveUp 和 moveDown 方法。这两个方法分别会根据当前选中的查询结果项的索引来移动选中项的位置，并更新 activeIndex 值，以便在模板中高亮显示选中项。

当用户点击查询结果项时，会触发 select 方法。在 select 方法中，你可以将当前点击的查询结果项的索引保存到 activeIndex 中，并处理选中查询结果项的逻辑，例如将选中项的值填充到输入框中。

最后，你需要使用 CSS 样式来实现查询结果列表的高亮显示效果。例如可以为选中的查询结果项添加一个 active 类，然后在 CSS 样式中设置该类的背景色和文字颜色等样式即可。