I have a table below my search input like below:
![enter image description here](https://i.stack.imgur.com/Q1fZw.png)
how to select the appropriate item from the list below using the arrows on the keyboard? additionally, it would be good if the currently selected element had a different color
here is my code:
<div class="relative flex w-full flex-wrap items-stretch" style="width: 450px;">
<span
class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
>
<i class="fas fa-search"></i>
</span>
<input
v-model.trim="searchBy"
@keyup.enter="getAllDatas"
type="text"
placeholder="Find more data..."
class="px-3 py-3 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:shadow-outline w-full pl-10"
/>
<br />
<table class="v-full" style="border: 1px solid #333;width: 450px;border-radius:5%;">
<tbody>
<tr v-for="r in data.items" :key="r.id">
<td style="border: 1px solid #333;background-color: #ffffff;" v-on:click="getData(r.id)">{{ r.name }}</td>
</tr>
</tbody>
</table>
</div>
I have no idea how to do this :(
thanks for any help
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…