Задать вопрос
lahma
@lahma
Фронтенд

Результаты поиска или как настроить выпадающий список?

1. Вопрос
Подключил UI библиотеку primevue.org и использовал .
Все классно все работает, но если длинное название или много элементов выпадающий список разъезжается непонятно куда.
Фото:
66c87664b2070282131969.png

66c876c83b36b582825080.png

Как управлять выпадающем списком так и не понял... подскажите если знаете. Спасибо!

2. Вопрос
Сделал поиск сам, выпадающий список не разъезжается все ок!
Но как сделать, чтобы по списку можно было двигаться с помощью стрелок на клавиатуре?
Нужно подключить "Псевдонимы клавиш" типа @keyup. down

Как управлять выпадающем списком так и не понял... подскажите если знаете. Спасибо!
  • Вопрос задан
  • 144 просмотра
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Добавляем в компонент свойство - индекс выделенного элемента выпадающего списка:

const searchIndex = ref(-1);

По нажатию на стрелки делаем ему плюс-минус один:

function onKeydown({ key }) {
  if (key === 'Escape') {
    searchQuery.value = '';
    return;
  }

  const data = filteredProducts.value ?? [];
  const { length } = data;

  if (length) {
    const index = searchIndex.value;
    const step = +(key === 'ArrowDown') || -(key === 'ArrowUp');

    if (step) {
      searchIndex.value = (Math.max(-1, index + step) + length) % length;
    } else if (key === 'Enter' && index !== -1) {
      onSelectProduct(data[index]);
    }
  }
}

watch(() => !!searchQuery.value.length, value => value
  ? document.addEventListener('keydown', onKeydown)
  : document.removeEventListener('keydown', onKeydown)
);

В зависимости от равенства значения этого свойства текущему индексу в v-for, назначаем элементу списка класс, который его визуально выделит:

.active {
  background: #ccc;
}

<li
  v-for="(n, i) in filteredProducts"
  :key="n.id"
  :class="{ active: i === searchIndex }"
  @mouseenter="searchIndex = i"
  @click="onSelectProduct(n)"
>

Если при изменении данных, на основе которых строится список, надо сбросить выделение, создаём соответствующий наблюдатель:

watch(filteredProducts, () => searchIndex.value = -1);

Вот как-то так.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы