Разработка сайтов в Комсомольском, ДНР. Облегченные элементы управления автозаполнением с помощью списка данных HTML5

В этом руководстве мы подробно рассмотрим малоиспользуемый

Что не так ? Элементы управления HTML5 идеально подходят, когда вы хотите, чтобы пользователь выбирал из небольшого набора параметров. Они менее практичны, когда:

есть много вариантов, таких как страны или должности

пользователь хочет ввести свой вариант, которого нет в списке

Очевидным решением является автозаполнение элемента управления. Это позволяет пользователю ввести несколько символов, что ограничивает возможности быстрого выбора.

переместится в нужное место, когда вы начнете печатать, но это не всегда очевидно. Он не будет работать на всех устройствах (например, на сенсорных экранах) и сбрасывается в течение секунды или двух. Разработчики часто обращаются к одному из множества решений на основе JavaScript, но настраиваемый элемент управления автозаполнением не всегда необходим. Элемент HTML5 легкий, доступный и не имеет зависимостей от JavaScript. Возможно, вы слышали, что он глючит или ему не хватает поддержки. Это не так в 2021 году, но есть несоответствия и предостережения в отношении браузеров. Быстрый старт Выбор страны из списка, содержащего более 200 вариантов, является идеальным кандидатом для управления автозаполнением. Определите дочерниеэлементы для каждой страны непосредственно на HTML-странице:AfghanistanÅland IslandsAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarctica ...etc... Затем на список данных idможно ссылаться listатрибутом в любом поле:

country

<input type="text"

list="countrydata"

id="country" name="country"

size="50"

autocomplete="off" />

Как ни странно, лучше установить autocomplete="off". Это гарантирует, что пользователю будут показаны значения в браузере,

Результат:

автозаполнение списка данных

Это рендеринг по умолчанию в Microsoft Edge. Другие приложения реализуют аналогичную функциональность, но внешний вид отличается для разных платформ и браузеров.

 

Опции

Использование метки в качестве текстового дочернего элемента

распространено:

 

label one

 

label two

 

label three

 

Использование valueатрибута дает идентичные результаты:

 

 

 

 

Примечание. Закрывающая />косая черта в HTML5 необязательна, хотя она может помочь предотвратить ошибки кодирования.

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

Опция 1:

 

label one

 

label two

 

label three

 

Вариант 2:

 

 

 

 

В обоих случаях для поля ввода установлено значение 1, 2или 3когда выбран допустимый вариант, но пользовательский интерфейс различается в разных браузерах:

Chrome показывает список со значением и меткой. Только значение остается после выбора опции.

Firefox показывает список только с меткой. Он переключается на значение после выбора опции.

Край показывает только значение.

В следующем примере CodePen показаны все варианты:

Реализации будут развиваться, но на данный момент я бы посоветовал вам не использовать значение и метку, так как это может запутать пользователей. (Обходной путь обсуждается ниже.)

Элемент

Есть несколько замечаний по реализации, но они не повлияют на большую часть использования. Худшее, что может случиться, — поле возвращается к стандартному текстовому вводу.

Если вам абсолютно необходимо поддерживать IE9 и ниже, существует резервный шаблон, который использует стандарт в сочетании с вводом текста в случае сбоя. Адаптация примера страны: country

 

 

Afghanistan

 

Åland Islands

 

Albania

 

Algeria

 

American Samoa

 

Andorra

 

Angola

 

Anguilla

 

Antarctica

...etc...

 

or other

 

<input type="text"

id="country" name="country"

size="50"

list="countrydata"

autocomplete="off" />

В современных браузерах

элементы становятся частью,

В IE9 и ниже активны как поля (очень длинные), так и поля ввода текста: Резервный список данных IE9 Оба значения можно было вводить в старых IE. Ваше приложение должно либо: решить, что является наиболее верным, или используйте небольшую функцию JavaScript для сброса одного при изменении другого Использование нетекстовых элементов управления Браузеры на базе Chrome также могут применять значения к: Вход с типом «date». Пользователь может выбирать из ряда опций, определенных как YYYY-MM-DDзначения, но представленных в формате локали. Вход с типом «color». Пользователь может выбрать один из вариантов цвета, определенных как шестизначные шестнадцатеричные значения (трехзначные значения не работают). Вход с типом «range». Ползунок показывает деления, хотя это не ограничивает, какое значение можно ввести. CSS-стиль Если вы когда-нибудь пытались создать стильную коробку,... вам было легко!

Для элемента An можно задать обычный стиль, но для связанного элемента

Я надеюсь, что эта ситуация улучшится, но пока в MDN предлагается решение, которое:

переопределяет поведение браузера по умолчанию

эффективно обрабатывает

label one

 

label two

 

label three

 

Примечание:

нельзя использовать, так как это приводит к созданию пустого элемента, который нельзя стилизовать!

Затем можно добавить CSS для стилизации некоторых или всех элементов

datalist {

position: absolute;

max-height: 20em;

border: 0 none;

overflow-x: hidden;

overflow-y: auto;

}

datalist option {

font-size: 0.8em;

padding: 0.3em 1em;

background-color: #ccc;

cursor: pointer;

}

/* active option styling */

datalist option: hover, datalist option: focus {

color: #fff;

background-color: #036;

outline: 0 none;

}

Пример:

Укладка работает, но стоит ли она усилий? Подозреваю, что нет...

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

Вы полагаетесь на 200 строк JavaScript, чтобы решить проблему с CSS. Он сокращается до 1,5 КБ, но может привести к проблемам с производительностью, если вам требуется много длинных

Если JavaScript является обязательным требованием, было бы предпочтительнее использовать более красивый, более последовательный, проверенный в боевых условиях компонент JavaScript?

Элемент управления возвращается к стандартному HTML5

Создание Ajax-расширенного

Предполагая, что ваш дизайнер с радостью примет различия в стилях браузера, можно расширить стандартную

Реализуйте необязательную проверку, которая принимает только известное значение в файле

Установите

элементы из данных, возвращаемых вызовами Ajax, для поисковых API.

Задайте другие значения поля при выборе параметра. Например, выбор «Соединенные Штаты Америки» устанавливает «США» в скрытом вводе.

Код в первую очередь должен переопределять

элементы, хотя есть несколько соображений кодирования:

Запрос Ajax API должен выполняться только после ввода минимального количества символов.

События ввода должны быть отклонены. То есть вызов Ajax запускается только после того, как пользователь перестал печатать как минимум на полсекунды.

Результаты запроса должны кэшироваться, чтобы не было необходимости повторять или анализировать идентичные вызовы.

Следует избегать ненужных запросов. Например, ввод «un» возвращает 12 стран. Нет необходимости делать дополнительные вызовы Ajax для «единицы» или «единицы «, потому что все результирующие варианты содержатся в исходных 12 результатах.

Для этого я создал стандартный веб-компонент, код доступен на GitHub. Приведенный ниже пример CodePen позволяет вам выбрать допустимую страну после ввода как минимум двух символов. Затем автозаполнение музыкального исполнителя возвращает исполнителей из этой страны с именами, соответствующими строке поиска:

API поиска страны предоставляется restcountries.eu.

API поиска музыкальных исполнителей предоставляется сайтом musicbrainz.org.

Чтобы использовать его в своем приложении, загрузите скрипт в любом месте вашей HTML-страницы как модуль ES6. URL CDN jsDelivr можно использовать:

Или вы можете установить его npm, если используете упаковщик:

npm install datalist-ajax

Создайте <auto-complete>элемент с дочерним элементом для использования в качестве поля ввода данных. Например, поиск страны использует это:

country lookup:

<auto-complete

api="https://restcountries.eu/rest/v2/name/${country}?fields=name;alpha2Code;region"

resultname="name"

querymin="2"

optionmax="50"

valid="please select a valid country"

>

auto-complete>

<auto-complete>атрибуты элемента:

атрибут описание

api URL REST API (обязательно)

resultdata имя свойства, содержащего результирующий массив объектов в возвращаемом API JSON (не требуется, если возвращаются только результаты)

resultname имя свойства в каждом объекте результата, которое соответствует входным данным поиска и используется для

элементов списка данных (обязательно)

querymin минимальное количество символов для ввода перед запуском поиска (по умолчанию: 1)

inputdelay минимальное время ожидания в миллисекундах между нажатиями клавиш перед поиском (по умолчанию debounce: 300)

optionmax максимальное количество отображаемых параметров автозаполнения (по умолчанию: 20)

valid если установлено, это сообщение об ошибке отображается, когда выбрано недопустимое значение

URL-адрес REST должен содержать хотя бы один ${id}идентификатор, который заменяется значением, установленным в файле id. В приведенном выше примере URL ${country}- apiадрес ссылается на значение в дочернем элементе , который имеет idзначение «country». URL-адрес обычно использует дочерний ввод, но можно ссылаться на любые другие поля на странице.

API restcountries.eu возвращает один объект или массив объектов, содержащих данные о стране. Например:

[

{

«name»: «Cyprus»,

«alpha2Code»: «CY»,

«region»: «Europe»

},

{

«name»: «Sao Tome and Principe»,

«alpha2Code»: «ST»,

«region»: «Africa»

},

{

«name»: «Andorra»,

«alpha2Code»: «AD»,

«region»: «Europe»

}

]

Атрибут resultdataне нужно устанавливать, потому что это единственные возвращаемые данные (нет объекта-оболочки). Для resultnameатрибута должно быть установлено значение, «name»поскольку это свойство используется для заполнения

элементов списка данных.

Другие поля могут быть заполнены автоматически при выборе опции. Следующие входы получают данные свойств «alpha2Code»и «region», поскольку data-autofillатрибут был установлен:

data-autofill="alpha2Code" type="text" id="countrycode" name="countrycode" readonly />

data-autofill="region" type="text" id="region" name="region" readonly />

Как datalist-ajaxработает

Вы можете пропустить этот раздел, если не хотите читать 230 строк кода и сохранить волшебство!

Код изначально создает новый

runQuery () строит URL-адрес API из данных в форме и выполняет вызов Ajax с помощью Fetch API. Возвращенный JSON анализируется, затем повторно используемый фрагмент DOM, содержащий

элементы, создается и помещается в кеш.

Вызывается datalistUpdate () функция, которая обновляет

Обработчик changeсобытий также отслеживает событие , которое срабатывает, когда фокус перемещается из поля и значение изменяется. Функция проверяет, соответствует ли значение известному параметру, и при необходимости использует API проверки ограничений для отображения сообщения об ошибке, указанного в validатрибуте.

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

Обратите внимание, что теневой DOM не используется. Это гарантирует, что элементы автозаполнения (и

Данкин

HTML5

Любой код и примеры, показанные в этом руководстве, могут быть адаптированы для ваших собственных проектов.