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>
|