Vuejs search list Navigate through list using arrowKeys - vue.js

Question

const app = new Vue({
el: '#app',
data: {
searchText: '',
listShow: true,
newDiv:false,
searcList:[],
list: {}
},
methods: {
handleBlur(e) {
console.log("inputOutClick");
if (this.listShow == false) {
console.log("mousedown was fired first");
}
this.listShow = false
},
selecteds(list) {
console.log("selecteds");
this.listShow = false;
this.searchText = list.name;
},
async search() {
this.listShow = true;
this.searcList = ['aeaeg', 'tdthtdht', 'srgsr'];
this.list.name = "TEST"
}
}
});
.dropdown-toggle-none::after {
content: none;
}
.select {
width: 100%;
max-height: 420px;
overflow-y: auto;
background: linear-gradient(#fdfdfd 30%, rgba(253, 253, 253, 0)), linear-gradient(rgba(253, 253, 253, 0), #fdfdfd 70%) 0 100%, linear-gradient(rgba(64, 54, 55, .1) 0, rgba(64, 54, 55, 0)) 100% 0, linear-gradient(rgba(64, 54, 55, 0) 0, rgba(64, 54, 55, .1)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 50px, 100% 50px, 100% 6px, 100% 6px;
background-attachment: local, local, scroll, scroll;
border-top: 1px solid #e8e7e7;
border-bottom: 1px solid #e8e7e7;
background-color: #fdfdfd;
}
.select {
z-index: 1;
top: 50px;
padding: 3px 0;
border: 1px solid #c5c4c2;
background-color: #fdfdfd;
-webkit-box-shadow: 0 3px 6px #c5c4c2;
-moz-box-shadow: 0 3px 6px #c5c4c2;
}
.select {
position: absolute;
border-radius: .357rem !important;
box-shadow: 0 3px 6px #c5c4c2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
line-height: 1.45;
}
.select ul {
padding: 0;
margin: 0;
}
.select li {
display: block;
cursor: pointer;
line-height: 20px;
color: #403637;
}
.select li a {
display: block;
padding: 5px 15px;
-webkit-transition-property: color, background-color;
-webkit-transition-duration: .66s;
-webkit-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
-moz-transition-duration: .66s;
-ms-transition-duration: .66s;
-ms-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
-o-transition-property: color, background-color;
-o-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
transition-property: color, background-color;
transition-duration: .66s;
transition-timing-function: cubic-bezier(.25, 1, .25, 1);
}
.select li a:hover {
color: #22c39e;
background-color: #e8e7e7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div>
<input
type="text"
class="form-control"
v-model="searchText"
#keyup="search"
#blur="handleBlur"
/>
<div v-if="listShow" style="background:red">
<ul>
<li v-for="(list, index) in searcList">
<a #mousedown.prevent #click="selecteds(list)">{{ list}}</a>
</li>
</ul>
</div>
<div v-if="newDiv">
<p>hello</p>
</div>
</div>
</div>
I'm trying to make a call with vuejs, there is a topic I'm just stuck with. e.g; I want to navigate in the data returned from the get data with the arrow signs "with the alt key or the up key", but I haven't quite figured out how to do it.
If it is a second issue, I want the color of whichever is selected in the list to be clear.
new Vue({
el: '#app',
data: {
type: "sales_invoices",
SearcListed: {
searchText: '',
listShow: false,
searcList: [],
},
},
methods: {
selecteds(list) {
this.SearcListed.listShow = false;
this.SearcListed.searchText = list.name;
},
async search() {
if (this.SearcListed.searchText !== '') {
const res = await this.callApi('get', 'getir' + '?filter=' + this.SearcListed.searchText)
if (res.status === 200) {
this.SearcListed.searcList = res.data;
if (res.data.length > 0) {
this.SearcListed.listShow = true;
} else {
this.SearcListed.listShow = false;
}
}
} else {
this.SearcListed.listShow = false;
}
},
}
});
.dropdown-toggle-none::after {
content: none;
}
.select {
width: 100%;
max-height: 420px;
overflow-y: auto;
background: linear-gradient(#fdfdfd 30%, rgba(253, 253, 253, 0)), linear-gradient(rgba(253, 253, 253, 0), #fdfdfd 70%) 0 100%, linear-gradient(rgba(64, 54, 55, .1) 0, rgba(64, 54, 55, 0)) 100% 0, linear-gradient(rgba(64, 54, 55, 0) 0, rgba(64, 54, 55, .1)) 0 100%;
background-repeat: no-repeat;
background-size: 100% 50px, 100% 50px, 100% 6px, 100% 6px;
background-attachment: local, local, scroll, scroll;
border-top: 1px solid #e8e7e7;
border-bottom: 1px solid #e8e7e7;
background-color: #fdfdfd;
}
.select {
z-index: 1;
top: 50px;
padding: 3px 0;
border: 1px solid #c5c4c2;
background-color: #fdfdfd;
-webkit-box-shadow: 0 3px 6px #c5c4c2;
-moz-box-shadow: 0 3px 6px #c5c4c2;
}
.select {
position: absolute;
border-radius: .357rem !important;
box-shadow: 0 3px 6px #c5c4c2;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
line-height: 1.45;
}
.select ul {
padding: 0;
margin: 0;
}
.select li {
display: block;
cursor: pointer;
line-height: 20px;
color: #403637;
}
.select li a {
display: block;
padding: 5px 15px;
-webkit-transition-property: color, background-color;
-webkit-transition-duration: .66s;
-webkit-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
-moz-transition-duration: .66s;
-ms-transition-duration: .66s;
-ms-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
-o-transition-property: color, background-color;
-o-transition-timing-function: cubic-bezier(.25, 1, .25, 1);
transition-property: color, background-color;
transition-duration: .66s;
transition-timing-function: cubic-bezier(.25, 1, .25, 1);
}
.select li a:hover {
color: #22c39e;
background-color: #e8e7e7;
}
<div id="app">
<div class="container">
<div class="col-sm-6">
<div class="input-group input-group-merge mb-1">
<input type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search2" v-model.trim="SearcListed.searchText" #keyup="search" autocomplete="off" />
<span class="input-group-text">
<i class="fas fa-search"></i>
</span>
<div class="select" v-if="SearcListed.listShow">
<ul>
<li v-for="(list, index) in SearcListed.searcList" :key="list.id">
<a #mousedown.prevent #click="selecteds(list)">{{ list.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>

Answer 1

To use Arrow Keys events you can use something like:
#keyup.up="nextListItem"
#keyup.down="previousListItem"
You would probably apply it on the following div:
<div #keyup.up="nextSearchList" #keyup.down="previousSearchList" class="input-group input-group-merge mb-1">...</div>
(Note that the keypresses would only be received when the div is in focus.)
You would have to add an index or object in your data() to keep track of what the selected item in the list is and then go to the next or previous one with nextListItem and previousListItem.
You can add a :class="{ active: index == selectedItemIndex}" to each li in the v-for to give the currently selected li the active class and then you can style it however you want to, for example:
.active {
background-color: grey;
}
Also, here is more info for vue2 and vue3 key event modifiers:
https://v2.vuejs.org/v2/guide/events.html#Key-Codes
And here is info for vue3:
https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html#_3-x-syntax