Vue는 검색에서 키보드 위아래 키를 클릭하면 검색에 해당하는 관련 키워드 콘텐츠의 전환을 실현합니다 ??? Baidu 검색

구현 아이디어 :
1. 키보드에서 위쪽 및 아래쪽 키를 누를 때 li 레이블의 아래 첨자를 클래스 스타일에 바인딩합니다 ..
2. 위로 단추를 다시 클릭 할 때 초기 아래 첨자 값을 고려하십시오. 아래 표의 li 0 이 처음 에
도달 하지 않았습니다
.
특수한 상황 : 가장 작은 아래 첨자를 눌렀을 때 아래 첨자를 처리하는 방법 3. 아래 버튼을 클릭 했을 때 , 특별한 상황 : 가장 큰 첨자를 눌렀을 때 무엇을해야합니까? 입찰 할 때하나요?

하위 구성 요소에서 =》

<div class="search">
    <div>
      <i class="fa fa-search" aria-hidden="true"></i>
      <input
        type="search"
        v-model="title"
        @input="send"
        @keyup.enter="sendTwo"
        @keydown.up="up"
        @keydown.down="down"
        @blur="hidden"
      />
    </div>
    <p @click="cancel">取消</p>
    <ul class="list" v-if="show">
      <li v-for="(item,key) in list" :key="key" :class="{bg:key==index}">{
   
   {item}}</li>
    </ul>
  </div>

data() {
    return {
      title: "",
      index: -1,
      show: true
    };
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    send() {
      this.$emit("sendData", this.title);
    },
    sendTwo() {
      this.send();
    },
    cancel() {
      this.title = "";
      this.$emit("sendData", this.list);
    },
    up() {
      if (this.index == -1 || this.index == 0) {
        this.index = this.list.length - 1;
      } else {
        this.index--;
      }
      this.title = this.list[this.index];
    },
    down() {
      if (this.index < this.list.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      this.title = this.list[this.index];
    },
    hidden() {
      this.show = false;
      this.title = "";
    }
  }

css
.bg {
  background-color: #eee;
  color: #fff;
}
.list {
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  li {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
  }
}
.search {
  width: 100%;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  div {
    width: 90%;
    input {
      width: 90%;
      height: 30px;
      border: 1px solid #000;
      border-radius: 20px;
      outline: none;
      text-indent: 25px;
    }
    i {
      position: relative;
      top: 2px;
      left: 20px;
    }
  }
}

아버지와 자식 아이템 =》

  <Search @sendData="getData" :list = "lists"></Search>

 data() {
    return {
      title: "",
      list: [],
      lists: []
    };
  },
  methods: {
    getData(data) {
      this.title = data;
      this.lists = [];
      this.list.forEach(v => {
        if (v.indexOf(this.title) !== -1) {
          this.lists.push(v);
        }
      });
      if (this.title == "") {
        this.lists = [];
      }
     }
  },
  mounted() {
    this.$axios.get("data.json").then(res => {
      this.list = res.data;
    });
  }