邏輯介紹：
　　1、表單獲取焦點時，顯示搜索建議框
　　2、輸入內容時，請求後臺接口，並將返回的數據展示在搜索建議框內
　　3、表單獲取焦點情況下，按鍵盤上下箭頭可實現搜索列表項的切換，按回車可以選擇當前激活的選項並獲取當前選項的數據，然後你可以用數據做其他事了

<template>
  <div class="container">
    <div class="d-searchBox">
      <input
        @keydown.down="selectResultItem"
        @keydown.enter="goSearch(currentIndex)"
 
        @blur="searchResultBoxShow = false"
        @focus="searchResultBoxShow = true"
        @input="inputHandle"
        type="text"
        placeholder="search"
        v-model="searchValue"
        ref="search"
      >
      <ul
        v-show="searchResultBoxShow || isMouseOnSerchBox"
        @mouseenter="isMouseOnSerchBox = true"
 
        @mouseleave="isMouseOnSerchBox = false"
        class="searchResult"
      >
        <li
          v-if="!loading"
          :class="[currentIndex === i ? ‘active‘ : ‘‘]"
          v-for="(item, i) of person"
          @click="goSearch(i)"
          :key="i"
        >
          <span>{{ item.name }}</span>
 
          <span>{{ item.honor }}</span>
        </li>
        <li
          style="text-align: center;line-height: 60px;"
          v-if="loading"
        >數據加載中...</li>
        <li
          v-if="!this.person.length && !loading"
          style="text-align: center;line-height: 60px;"
        >no Data</li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      searchResultBoxShow: false,
      isMouseOnSerchBox: false,
      searchValue: ‘‘,
      currentIndex: -1,
      person: [],
      loading: false,
      personData: [
        {
          ‘id‘: ‘001‘,
          ‘age‘: ‘45‘,
          ‘name‘: ‘晁蓋‘,
          ‘honor‘: ‘托塔天王‘
        },
        {
          ‘id‘: ‘002‘,
          ‘age‘: ‘44‘,
          ‘name‘: ‘宋江‘,
          ‘honor‘: ‘及時雨‘
        },
        {
          ‘id‘: ‘003‘,
          ‘age‘: ‘44‘,
          ‘name‘: ‘吳用‘,
          ‘honor‘: ‘智多星‘
        },
        {
          ‘id‘: ‘004‘,
          ‘age‘: ‘44‘,
          ‘name‘: ‘盧俊義‘,
          ‘honor‘: ‘玉麒麟‘
        }
      ]
    }
  },
  methods: {
    goSearch (i) {
      const item = this.person[i]
      console.log(‘got the‘ + item + ‘and yon can do something‘)
      this.$refs.search.blur()
      this.currentIndex = i
      this.searchResultBoxShow = this.isMouseOnSerchBox = false
      this.person = []
      this.searchValue = ‘‘
    },
    selectResultItem () {
      if (this.currentIndex === this.person.length - 1) {
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
    },
    inputHandle () { // 此處應該做節流
      this.searchResultBoxShow = true
      this.loading = true
      setTimeout(() => {
        this.person = this.personData
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/variate";
  .container {
    width: 100%;
    .d-searchBox {
      margin-left: 300px;
      margin-top: 20px;
      display: inline-block;
      position: relative;
      input {
        height: 26px;
        border-radius: 4px;
        font-size: 14px;
      }
      .searchResult {
        position: absolute;
        top: 36px;
        left: 0;
        background-color: #fff;
        box-shadow: 0 0 6px 0 $themecolor;
        width: 100%;
        li {
          border-bottom: 1px solid #ddd;
          padding: 4px 10px;
          font-size: 14px;
          color: $themecolor;
          &.active {
            background-color: rgba($themecolor, 0.1);
          }
        }
      }
    }
  }
</style>
效果圖如下：

VUE模仿百度搜索框，按上下方向鍵及回車鍵實現搜索選中效果