jQuery DropDownList

jqxDropDownList представляет собой виджет jQuery, содержащий список доступных для выбора элементов. отображается в раскрывающемся списке. Он работает исключительно хорошо с тысячами предметов и поддерживает навигацию с помощью клавиатуры и визуализацию элементов расширенного списка. Мы разработали и создал виджет jqxDropDownList с нуля, чтобы обеспечить визуальный вид, и богатство функций, которое требуется профессиональным разработчикам программного обеспечения. Попробуйте jqxDropDownList в нашем jsEditor — облачном решении для редактирования JavaScript, HTML и CSS, размещения и обмена идеями веб-разработки!

Особенности

  • Высокая производительность
  • Привязка данных
  • Клавиатура навигации
  • Инкрементальный поиск
  • Поддержка ПК, сенсорных и мобильных устройств
  • Соответствие веб-стандартам
  • Богатый и простой в использовании JavaScript API
  • Простая настройка и встроенные темы

Отличная производительность

Наш jQuery DropDownList предлагает интуитивно понятный и простой в использовании интерфейс. Он поддерживает полная виртуализация пользовательского интерфейса, которая сводит к минимуму количество элементов DOM, которые необходимо визуализируется и обеспечивает непревзойденную производительность в сценариях с тысячами списков предметы.

Привязка данных

jqxDropDownList имеет встроенную логику привязки данных, предназначенную для поддержки различных данных. источники и работать с большими наборами данных. Поддерживает несколько режимов привязки данных оптимизирован для распространенных сценариев:

  • Локальные данные — загрузка DropDownList из локального массива объектов.
  • Xml Data — загрузка DropDownList из источника данных XML с помощью AJAX.
  • Данные JSON — загрузите DropDownList из источника данных JSON с помощью AJAX.
  • Данные CSV — загрузка DropDownList из CSV.
  • Данные вкладки — загрузка DropDownList из файлов с разделителями табуляции (TSV).
  • Удаленные данные — загрузите DropDownList с помощью JSONP. JSONP (JSON с дополнением) представляет данные JSON, завернутые в вызов функции. JSONP — эффективный междоменный метод связи, часто используемый для обхода ограничений политики того же источника.

Клавиатура навигации

Вы можете использовать клавиши со стрелками на клавиатуре для перемещения по элементам DropDownList.

Нажмите стрелку вниз, чтобы переместиться вниз по выбору. Нажмите стрелку вверх, чтобы переместиться вверх по выбор. Нажимайте клавиши Page Up/Down для перехода вверх или вниз на одну страницу. Когда вы нажимаете клавиши Home и End, вы можете легко перейти к первому и последнему списку элемент.

Инкрементальный поиск

Пошаговый поиск начинается, как только вы набираете первый символ строку поиска. Когда вы вводите строку поиска, jqxDropDownList автоматически выбирает найденный предмет. Когда вы наберете достаточно символов, чтобы определить место хочешь, можешь остановиться.

Вы можете явно прекратить поиск, нажав «Возврат». или клавиши «Esc». Если вы ошибетесь при наборе строки поиска, вы можно отменить символы с помощью «DEL» или «Backspace». Каждый ‘DEL’ или ‘Backspace’ отменяет последний символ строки поиска. Инкрементальный Строка поиска автоматически перезапускается через определенный промежуток времени, когда вы прекращаете печатать.

Фильтрация в JavaScript с помощью выпадающего списка HTML | by Sarah Chavez

Я новичок в JavaScript (JS) и недавно начал проект с использованием JS в первый раз. Почти полный запрет на аборты в Техасе вдохновил меня на создание поисковика клиник для абортов с вариантами клиник, которые можно фильтровать по штатам.

Сложный аспект моего проекта заключался в создании инструмента для фильтрации клиник по штатам с использованием раскрывающегося списка HTML и метода фильтрации JS. Я решил задокументировать свои шаги по воссозданию такого фильтра.

Фото предоставлено: https:www.maxpixel.net/photo-4828418

Добавление выпадающего списка в HTML-файл

Существует так много подходов к фильтрации. Однако для простого раскрывающегося списка, такого как мой, вам понадобится элемент :

Затем я создал функцию для установки параметров состояния в качестве переменных. Это облегчит заполнение выпадающего списка. Я создал переменную с именем option и использовал конструктор класса состояния, чтобы создать параметры для раскрывающегося списка.

Затем я создал функцию, которая добавляет параметры в раскрывающийся список.

Добавить прослушиватель событий

Чтобы обрабатывать часть фильтрации, мне нужна некоторая логика, чтобы определить, когда параметр раскрывающегося списка изменяется. Мне также понадобится некоторая логика для фильтрации всех клиник по выбранному штату. Я справился с этим, добавив прослушиватель событий JS, поэтому, когда пользователь фиксирует изменение значения элемента из раскрывающегося списка, событие запускается для элемента