키가 상승했고 VueJs에Autocomplete으로 찾고 있다.

키가 상승했고 VueJs에Autocomplete으로 찾고 있다.

나의 오토 컴플리트 하다 검색 외에도 기능 키down/up 기능 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)
    }
  }
})

입력 필드에 사용자들이 순간부터, 어떻게 나는 또한 그에게 키 그리로 가서 목록에서를 고를 수 있고, 우리는 현재 우리가 키 up/down를 사용하는 목록을 사용할 수 있도록 할 수 있을까요?

내 오르간 여기 있다.

당신은 같은 사용할 수 있다.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>

참조URL:https://stackoverflow.com/questions/59086809/autocomplete-search-with-key-down-and-up-in-vuejs