Материализация CSS ФормаВыберите, как получить секунду буквы при нажатии клавиатуры

Question

Я использую материализовать CSS на веб-странице с Jquery. У меня есть поле выбора с большим количеством опций. Обычно с полем выбора я могу несколько раз оценить цену письма, чтобы просмотреть варианты, начинающиеся с этой буквы. Однако при использовании материализации FormSelect я не могу этого сделать. Я нажимаю на письмо один раз, и это правильно приводит меня к первой записи этого письма. Когда я нажимаю на него второй раз, хотя он оставляет меня там. Я мог бы использовать стрелку вниз, однако в моем случае это список стран с США наверху, так как большинство клиентов находятся в США. Если им случится жить в Соединенном Королевстве, хотя я ожидаю, что они могут просто нажать U, U, чтобы попасть туда, но они не могут. Кто-нибудь знает способ исправить это?

Answer 1

Вам нужно использовать Автозаполнение вместо выбора, который выводит список доступных опций на основе нажатия клавиши. Это разметка из документации:

 <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

Это компонент javascript, который необходимо инициализировать с помощью, и при инициализации вы можете передать необходимые данные:

document.addEventListener('DOMContentLoaded', function() {

    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, {
      data: {
        "United Kingdom": null,
        "USA": null,
        "Uruguay": null
      },
    });

  });

FYI null - это необязательное изображение sr c - поэтому в вашем примере вы можете включить флаг страны:

"USA": '../img/usa.svg'

Существует ряд других полезных опций, которые вы можете передать - установить, сколько символов запускается в раскрывающемся списке, запустить функцию при выборе опции, ограничить количество одновременно отображаемых опций и т. д. c.

https://materializecss.com/autocomplete.html

Рабочая демонстрация Codepen здесь .