Autocomplete search with key down and up in VueJs

Question

In addition to my autocomplete search, I want to add functionality to allow key down/up functionality using VueJs

My template looks like this:

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

In the scripts I have the following:

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

From the moment the user hits on the input field, how can I also allow him to use key down and up to choose from the list and highlight the list that we are currently on as we use the key up/down?

My full fiddle is here

Answer 1

You could use the same onArrow function for both @keydown.down and @keydown.up to set the text as follows:

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