扩展ElementUI el-autocomplete 上下键闭环滚动选择

对element ui中的 el-autocomplete中的上下键进行扩展，可上下键闭环滚动功能选择

关键对el-autocomplete进行监听上下键并处理

<template>
  <div class="content">
    <el-autocomplete
      v-model="value"
      ref="selectRemote"
      placeholder="请输入关键词"
      @select="handleSelect"
      @input="update"
      @keydown.down.native="nagtiveRow(highlightedIndex + 1)"
      @keydown.up.native="nagtiveRow(highlightedIndex - 1)"
    ></el-utocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
     value:"",
      highlightedIndex: -1 // 用于标识上下键移动位置。input、select进行重置-1
    };
  },
  methods: {
    // 扩展autocomplete 上下键进行从头从尾
    nagtiveRow(index) {
      const selectRemote = this.$refs["selectRemote"];
      this.highlightedIndex = index;
      if (index < 0) {
        this.highlightedIndex = this.options.length - 1;
      } else if (index >= this.options.length) {
        this.highlightedIndex = 0;
      } else {
        this.highlightedIndex = index;
      }
      selectRemote.highlight(this.highlightedIndex);
      const suggestion = selectRemote.$refs.suggestions.$el.querySelector(
        ".el-autocomplete-suggestion__wrap"
      );
      const suggestionList = suggestion.querySelectorAll(
        ".el-autocomplete-suggestion__list li"
      );
      let highlightItem = suggestionList[this.highlightedIndex];
      let offsetTop = highlightItem.offsetTop;
      suggestion.scrollTop = offsetTop;
    },
    update(val) {
      this.highlightedIndex = -1;
    },
    handleSelect(row) {
      this.highlightedIndex = -1;
    }
  }
};
</script>