javascript - 在 VueJs 中使用上下键自动完成搜索

Question

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

我的模板如下所示:

<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)
    }
  }
})

从用户点击输入字段的那一刻起，我怎样才能让他使用向下键和向上键从列表中进行选择，并在我们使用向上/向下键时突出显示我们当前所在的列表？

我的完整 fiddle 是 here

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>