Как выбирать стрелками клавиш между блоками?

Question

[danilr]

Есть вот такой интерфейс, вводишь в input и при совпадении поиска - выдаются варианты. Подскажите как сделать так, чтобы по ним можно было переключаться с помощью стрелочек вверх и вниз? (это просто блоки div)

Шаблон этого интерфейса:

<template>
	<div class="search-btn-wrapper" :class="{'search-open': isOpenSearch}">
		<div class="input-search-box">
			<input
				id="inpit-search"
				placeholder="Поиск ЖК/застройщика"
				v-model="inputText"
				@input="inputHandler"
			>
			<div v-if="!isOpenSearch" @click="searchOpen" class="img-open-wrapper">
				<img class="img-loop" src="/images/map-search/search-black.svg">
			</div>
			<img v-else @click="searchClose" class="img-drop" src="/images/map-search/close-black.svg">
		</div>
		<div v-if="isOpenSearch && nameSearch.length && !choosenName" class="search-result-wrapper">
      <div :key="index" v-for="(residential, index) in getFilterRc.slice(0,4)" 
          class="result-point" 
          @click="handlerDevOrRc(residential.id)"
      >
				<div class="result-img-wrapper">
          <img class="img-result" src="/images/map-search/developer-search.svg">
				</div>
				<div class="result-title">{{residential.title}}</div>
			</div>
		</div>
	</div>
</template>

Answer 1

[Stalker_RED]

https://ru.vuejs.org/v2/examples/select2.html

Ну или написать самому: слушать keydown, давать выбранному элементу какой-то класс.

Comments

[danilr]

Вариант нужен с событием слушателя надо, не знаю только как это написать. Еще его надо добавлять только когда есть результат, удалять когда нет. Так как события стрелок уже используются для передвижения на карте.

[Stalker_RED]

danilr, вешайте listener не глобально на документ, а на обертку карты и на список отдельно.
Или, если таки глобальный, то по evetn.target выясняйте где именно было нажатие.

Answer 2

[hzzzzl]

я бы делал как-то так, смотря как этот список реализован и как он работает

let currentlySelected = 0  // по умолчанию подсвечен первый

window.addEventListener('keydown', e => {
//  e.keyCode = 38 вверх 40 вниз
  if (inputSelectOpened && (e.keyCode === 38 || e.keyCode ===40)) {
    // список развернут и вверх/вниз
    //  тут у всех элементов списка убрать выделение
    // currentlySelected ++ или -- в зависимости от keyCode
    inputSelectElements[currentlySelected].classList.add('selected')
  }
})

UPD
не заметил в тэгах что это про Vue, тогда не знаю

Comments

[danilr]

Думаю, не важно что это вью, добавил верстку этих блоков, можете подробнее описать как нужно сделать?