enter() {
this.selection = this.matches[this.current];
this.open = false;
},
change() {
if (this.open == false) {
this.open = true;
this.current = 0;
}
if(this.search == "") {
this.isSearchText = false;
} else {
this.isSearchText = true;
}
},
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)
},
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);
}
},<input class="form-control bg-light-blue" id="SearchText" type="text" v-model="search"
@keydown.enter = 'enter'
@input = 'change'
@keyup="inputChanged"
@keydown.down="onArrow"
@keydown.up="onArrow"
/>I desire to replicate this feature within Vue.js