自动完成搜索，在VueJs中上下按键

Question

除了自动完成搜索之外，我还想添加功能以允许使用VueJ进行按键向下/向上功能

我的模板如下所示：

<div id="app">
  <h2>Todos:</h2>
  <div class="autocomplete">
    <input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrowDown"/>
     <ul
       v-for="(user, i) in filteredUsers" 
       :key="i"
       class="autocomplete-results" 
       v-show="isOpen"
       :class="{ 'is-active': i === arrowCounter }"
     >
       <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
  </div>
</div>

在脚本中，我具有以下内容：

new Vue({
  el: "#app",
  data: {
    users: [
      { id: 1, text: "Learn JavaScript", done: false },
      { id: 2, text: "Learn", done: false },
      { id: 3, text: "Play around in JSFiddle", done: true },
      { id: 4, text: "Build something awesome", done: true }
    ],
    search: '',
    arrowCounter: 0 ,
    isOpen: false,
    filteredUsers: []
  },
  methods: {
    setResult(text) {
        this.search = text
    },
    onArrowDown(event){
      if (this.arrowCounter < this.filteredUsers.length) {
        this.arrowCounter++
      } 
    },
    inputChanged(){
      var filtered = this.users.filter((user) => {
        return user.text.match(this.search)
      });
      this.filteredUsers = [] 
      this.isOpen = true
      this.filteredUsers.push(...filtered)
      console.log(this.filteredUsers)
    }
  }
})

从用户点击输入字段的那一刻起，我又如何允许他使用上下键从列表中进行选择并突出显示我们当前在使用上下键时的列表？

我的小提琴在这里

Answer 1

您可以对onArrow两者使用相同的函数@keydown.down并@keydown.up设置文本，如下所示：

<input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow" />

onArrow(event) {
  if (this.filteredUsers.length > 0) {
    this.arrowCounter = event.code == "ArrowDown" ? ++this.arrowCounter : --this.arrowCounter;
    if (this.arrowCounter >= this.filteredUsers.length)
      this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;
    else if (this.arrowCounter < 0)
      this.arrowCounter = this.filteredUsers.length + this.arrowCounter;
    this.setResult(this.filteredUsers[this.arrowCounter].text);
  }
},
inputChanged(event) {
  if (event.code == "ArrowUp" || event.code == "ArrowDown")
    return;
  this.filteredUsers = [];

  if (event.code == "Enter")
    return;
  ...
}

.is-active {
  background-color: #dedede;
}

new Vue({
  el: "#app",
  data: {
    users: [{
        id: 1,
        text: "Learn JavaScript",
        done: false
      },
      {
        id: 2,
        text: "Learn",
        done: false
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        done: true
      },
      {
        id: 4,
        text: "Build something awesome",
        done: true
      }
    ],
    search: '',
    arrowCounter: -1,
    isOpen: false,
    filteredUsers: []
  },
  methods: {
    setResult(text) {
      this.search = text
    },

    onArrow(event) {
      if (this.filteredUsers.length > 0) {
        this.arrowCounter = event.code == "ArrowDown" ? ++this.arrowCounter : --this.arrowCounter;
        if (this.arrowCounter >= this.filteredUsers.length)
          this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;
        else if (this.arrowCounter < 0)
          this.arrowCounter = this.filteredUsers.length + this.arrowCounter;
        this.setResult(this.filteredUsers[this.arrowCounter].text);
      }
    },
    inputChanged(event) {
      if (event.code == "ArrowUp" || event.code == "ArrowDown")
        return;

      this.filteredUsers = [];

      if (event.code == "Enter")
        return;

      var filtered = this.users.filter((user) => {
        return user.text.match(this.search)
      });

      this.isOpen = true
      this.filteredUsers.push(...filtered)


      console.log(this.filteredUsers)
    }
  }
})

.autocomplete {
  position: relative;
}

.autocomplete-results {
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  /* height: 120px; */
  overflow: auto;
  width: 100%;
}

.autocomplete-result {
  list-style: none;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
  background: red;
}

.autocomplete-result.is-active,
.autocomplete-result:hover {
  background-color: #4AAE9B;
  color: white;
}

.is-active {
  background-color: #dedede;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <div class="autocomplete">
    <input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow" />
    <ul v-for="(user, i) in filteredUsers" :key="i" class="autocomplete-results" v-show="isOpen" :class="{ 'is-active': i === arrowCounter }">
      <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
  </div>
</div>