Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.09.2020, 17:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от CryNet
Может у вас будут идеи как его улучшить
Сообщение от рони
читать документацию на плагин,
Ответить с цитированием
  #12 (permalink)  
Старый 16.09.2020, 17:44
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Сообщение от рони Посмотреть сообщение
Там поиск совсем по другому работает. Он интуп для поиска добавляет. Ну и скрывает все остальные опции. Пруф: https://jsfiddle.net/g54eLdnb/2/
Ответить с цитированием
  #13 (permalink)  
Старый 16.09.2020, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

CryNet,
в выпадающем списке сортировка по алфавиту(надо смотреть документацию,где убрать сортировку shouldSort : false ), а выбор по первой букве: по селекту в изначальном виде.
<!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>

<link rel="stylesheet" href="https://joshuajohnson.co.uk/Choices/assets/styles/choices.min.css" />
<script src="https://joshuajohnson.co.uk/Choices/assets/scripts/choices.min.js"></script>


<script>
const elements = Array.from(
    document.querySelectorAll('select'),
    element => {
    const options = Array.from( element.options);
    const example = new Choices(element, {
    searchEnabled: true,
    searchChoices: false,
    shouldSort : false 
    });
    element.addEventListener('search', function(event) {
    const key = event.detail.value.toLowerCase();
    example.clearInput();
    const choices = options.filter(({text}) => text.toLowerCase().startsWith(key));
    if(choices.length){
    const values = example.getValue(true)[0];
    let index = (choices.findIndex(({value}) => value == values) + 1) % choices.length;
    example.setChoiceByValue(choices[index].value);
    };
    })
    return example
    }
    );

</script>
</body>
</html>

Последний раз редактировалось рони, 16.09.2020 в 19:18.
Ответить с цитированием
  #14 (permalink)  
Старый 16.09.2020, 20:00
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151



Спасибо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать вертикальное меню с анимацией? 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 16:51
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32