HTML <select>: опция фокуса основана на вводе пользователем?

Question

У меня есть элемент выбора HTML:

<select id='poetslist'>
    <option value="shakespeare">William Shakespeare</option>
    <option value="milton">John Milton</option>
    <option value="keats">John Keats</option>
    <option value="wordsworth">William Wordsworth</option>
    <option value="larkin">Phillip Larkin</option>
</select>

В Chrome при загрузке страницы выбирается опция William Shakespeare. Если пользователь начинает печатать «Фил», список фокусируется на Phillip Larkin. Знакомое поведение.

То, что я хотел бы сделать (желательно с использованием jQuery), это также , позволяющие пользователю печатать инициалы поэта и иметь в фокусе соответствующую опцию.

Так что если вы набрали JK, то в фокусе должна появиться опция John Keats. JM и Джон Милтон и др.

Я даже не знаю, как работает элемент выбора HTML, отличается ли он в разных браузерах и т. Д. - и, кажется, трудно найти хорошую документацию для этого.

Кто-нибудь может найти умный способ сделать это в jQuery?

Answer 1

Вот полное решение:

1. Добавьте атрибуты к каждой опции, как предлагает @JMC.Однако я бы добавил к имени атрибута «data-», чтобы он соответствовал стандартам HTML5 .jQuery (начиная с v1.4.3) также поддерживает получение атрибутов, начинающихся с «data-», используя .data().
2. Привязка к событию нажатия клавиши.Это более правильно, чем keyup по следующим причинам:
   1. Семантически, нажатие клавиши означает, что пользовательский ввод произошел, в то время как нажатие клавиши означает, что физическая клавиша отменена.Например, нажатие клавиши приведет к нескольким событиям нажатия клавиш (для каждого символа, отображаемого на экране), в то время как только одно событие нажатия клавиш.Клавиша также не склонна к неправильному получению порядка нажатий клавиш, когда пользователь быстро набирает «QW», но поднимает клавишу «W» (клавиша) до нажатия клавиши «Q».
   2. Клавиша будет сгенерирована нане символьные клавиши, такие как стрелки, клавиша Backspace и т. д., в то время как нажатие клавиши не будет.
3. Используйте таймер для различения двух изолированных нажатий клавиш и одной последовательности нажатий клавишНапример, пользователь имел в виду «W» для Уильяма Шекспира и , затем «P» для Филиппа Ларкина или просто «WP» для ... независимо от поэта.

HTML

<select id="poetslist">
    <option value="shakespeare" data-initial="WS">William Shakespeare</option>
    <option value="milton" data-initial="JM">John Milton</option>
    <option value="keats" data-initial="JK">John Keats</option>
    <option value="wordsworth" data-initial="WW">William Wordsworth</option>
    <option value="larkin" data-initial="PL">Phillip Larkin</option>
</select>

Javascript

var timer = null, initials = "";

$("#poetslist").keypress(function (e) {
    initials += String.fromCharCode(e.which).toUpperCase();

    // Look for option with initials beginning with the typed chars
    $(this).find("option").filter(function () {
        return $(this).data("initial").toUpperCase().indexOf(initials) === 0;
    }).first().attr("selected", true);

    // Set/reset timer
    if (timer) {
        clearTimeout(timer);
        timer = null;
    }
    timer = setTimeout(function () {
        timer = null;
        initials = "";
    }, 2000); // Max 2 second pause allowed between key presses

    return false;
});

Answer 2

Имея в виду ответ @ Charlie, если у вас есть доступ к созданию html, проще всего добавить дополнительный атрибут к элементу option, например

<option init="WW" value="wordsworth">William Wordsworth</option>
<option init="PL" value="larkin">Phillip Larkin</opt

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

После добавления дополнительного атрибута в опцию нужно просто проверить эти значения в keyup окна поиска.

Answer 3

Основная магия, которая вам нужна, - это установить свойство «selected» в одном из вариантов.Дайте каждому удостоверение личности.Затем используйте

$('#anId').attr('selected','selected');

См. Также этот вопрос SO .

Теперь, для поведения выбора, вам, вероятно, нужно перехватить события нажатие клавиши и делай свою логику.Самая хитрая часть, вероятно, состоит в том, чтобы выяснить, что делать в нечетных случаях, например, что происходит, когда кто-то печатает "JKM" - Китс или Милтон?