Vue模拟百度搜索框，方向键和回车键选择搜索结果

2023-10-09 10:40:10

互联网搜索，可谓是大家上网最频繁的功能之一了。百度作为搜索领域的头部企业，其搜索体验也一直备受用户好评。最近，我在研究 Vue.js 时，决定尝试模拟百度搜索框的功能，包括使用方向键和回车键选择搜索结果。

技术选型

为了实现这一目标，我选择了以下技术栈：

Vue.js 3：一个渐进式 JavaScript 框架，用于构建用户界面。
Axios：一个基于 Promise 的 HTTP 客户端，用于与后端 API 通信。
Tailwind CSS：一个实用优先的 CSS 框架，用于快速轻松地创建美观的 UI。

实现细节

1. 搜索建议框

搜索建议框是百度搜索框的重要组成部分。它会在用户输入时显示相关的搜索建议，帮助用户快速找到所需信息。为了实现这一功能，我使用 Vue.js 的 v-model 指令将搜索框中的输入内容绑定到一个名为 query 的数据属性。当 query 发生变化时，我会使用 Axios 发起一个请求到后端 API，并获取相关的搜索建议。

<template>
  <input type="text" v-model="query" @input="getSuggestions">
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      query: '',
      suggestions: []
    }
  },
  methods: {
    getSuggestions() {
      if (!this.query) return

      axios.get('/api/suggestions', { params: { q: this.query } })
        .then(res => this.suggestions = res.data)
        .catch(err => console.error(err))
    }
  }
}
</script>

2. 方向键和回车键选择

为了使用方向键和回车键在搜索建议中进行选择，我使用 Vue.js 的 keydown 事件监听器。当按下方向键时，我会更新一个名为 selectedIndex 的数据属性，该属性表示当前选中的建议的索引。当按下回车键时，我会根据 selectedIndex 发起实际的搜索请求。

<template>
  <ul v-if="suggestions.length">
    <li v-for="(suggestion, index) in suggestions" :key="index"
      :class="{ 'bg-blue-100': index === selectedIndex }"
      @click="selectSuggestion(index)" @keydown.enter="submitQuery">
      {{ suggestion }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: -1
    }
  },
  methods: {
    selectSuggestion(index) {
      this.selectedIndex = index
    },
    submitQuery() {
      if (this.selectedIndex === -1) return

      const query = this.suggestions[this.selectedIndex]
      // 发起实际的搜索请求
    }
  }
}
</script>