Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.09.2020, 10:55
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Как сделать поиск по опциям в селекте?
Есть селект с опциями:

<select id="group_id_170" name="group_id" class="mySelect choices__input is-hidden" tabindex="-1" aria-hidden="true" data-choice="active">
<option value="771" selected="">Обратная связь</option>
<option value="772" selected="">Обратная</option>
<option value="773" selected="">Связь</option>
</select>


При клике на селект и вводе буквы с клавиатуры (событие keyup) должен срабатывать поиск по опциями, по первой букве опции и подсветке найденой. Но подсвечивать нужно только первую найдённую, а если юзер снова введёт эту же букву, то уже подсветить нужно вторую найденную и так дале. Поиск нужно зациклить. То есть если больше опций нет, то вернуться нужно в начало и подсветить первую.

Как можно подобное реализовать?

У меня есть следующее:

const select = event.target.querySelector("select")
    const choices = Array.from( event.target.querySelectorAll("option") )
    choices.forEach(e => e.textContent = e.textContent.replace(/\s+/g, ' ').trim()) // убираем лишние пробелы
    const filtred = choices.filter(e => e.textContent[0].toLowerCase().includes(searchValue)) // все найденные


P.S опции обрабатываются библиотекой choices.js и первая опция по умолчанию уже выделенна, класс is-highlighted

Последний раз редактировалось CryNet, 16.09.2020 в 11:00.
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2020, 12:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,054

Сообщение от CryNet
, а если юзер снова введёт эту же букву, то уже подсветить нужно вторую найденную и так дале.
трудноуловимая логика...
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2020, 12:45
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Сообщение от рони Посмотреть сообщение
трудноуловимая логика...
Вот у нас есть опции:

<option value="771" selected="">Обратная связь</option>
<option value="772" selected="">Обратная</option>


Если я нажал один раз "о" на клавиатуре, то должна подсветиться
<option value="771" selected="">Обратная связь</option>
если второй раз, то
<option value="772" selected="">Обратная</option>
и так далее. А когда эти опции закончаться, то нужно вернуться на самый первый и так по кругу.
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2020, 13:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,054

CryNet,
как понять буква первая или вторая или третья... ?
Ответить с цитированием
  #5 (permalink)  
Старый 16.09.2020, 13:11
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Сообщение от рони Посмотреть сообщение
CryNet,
как понять буква первая или вторая или третья... ?
Ну, нарпимер, если мы перебираем опции селекта, то это может выглядеть так:

option.filter(e => {
   e.textContent[0]
})
Ответить с цитированием
  #6 (permalink)  
Старый 16.09.2020, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,054

CryNet,
поиск всегда только по первой букве option?
Ответить с цитированием
  #7 (permalink)  
Старый 16.09.2020, 13:24
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Сообщение от рони Посмотреть сообщение
CryNet,
поиск всегда только по первой букве option?
Да. У меня все решения сводяться к одному. И я как бы не могу выбраться из своего кругозора, чтобы взглянуть на задачу по другому

Песочница:https://jsfiddle.net/qokp6g1e/4/

Последний раз редактировалось CryNet, 16.09.2020 в 13:44.
Ответить с цитированием
  #8 (permalink)  
Старый 16.09.2020, 14:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,054

CryNet,
надо читать документацию на плагин, без плагина можно так ... нажать на селект, нажать на клавишу нужной буквы.
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<select id="group_id_170" name="group_id" class="mySelect">
<option class="is-highlighted" value="0" selected="">Админ</option>
<option value="1" selected="">Обратная связь</option>
<option value="2" selected="">Обратная</option>
<option value="3" selected="">О</option>
<option value="4" selected="">Связь</option>
<option value="5" selected="">С</option>
</select>


<script>
let sel = document.querySelector('select').addEventListener('keydown', function(event) {
const key = event.key.toLowerCase();
const options = Array.from( this.options);
const choices = options.filter(({text}) => text.toLowerCase().startsWith(key));
if(choices.length){
let index = (choices.findIndex(({selected}) => selected) + 1) % choices.length;
choices[index].selected = true;}
})
</script>
</body>
</html>

Последний раз редактировалось рони, 16.09.2020 в 14:22.
Ответить с цитированием
  #9 (permalink)  
Старый 16.09.2020, 15:39
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Сообщение от рони Посмотреть сообщение
CryNet,
надо читать документацию на плагин, без плагина можно так ... нажать на селект, нажать на клавишу нужной буквы.
У плагина есть метод, добавляющий полосу поиска. Но мне это не подходит.

Немного не правильно отрабатывает: https://jsfiddle.net/u53txznd/

1) Если мы нажали одну и ту же клавишу второй раз, то с текущего нужно снять подсветку (класс is-highlighted), а следующему добавить.
2) Если опций больше двух, то логика ломается - третий посвечивать не хочет.
Ответить с цитированием
  #10 (permalink)  
Старый 16.09.2020, 17:18
Аспирант
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 85

Сообщение от рони Посмотреть сообщение
CryNet,
надо читать документацию на плагин, без плагина можно так ... нажать на селект, нажать на клавишу нужной буквы.
Доделал ваше решение: https://jsfiddle.net/g54eLdnb/
Теперь всё работает как нужно. Правда решение не очень симтатичное. Может у вас будут идеи как его улучшить/переписать?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать вертикальное меню с анимацией? Wimko jQuery 3 28.06.2020 19:31
Как сделать короткую функцию для forEach? nastya97core Общие вопросы Javascript 11 14.05.2020 07:12
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Как правильно сделать поиск по массиву? gsdev99 Элементы интерфейса 4 12.02.2019 15:51
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 19:32