Атрибут data-* тега <datalist>
Описание
Атрибуты data-* для тега <datalist> позволяют хранить дополнительную информацию о списке вариантов автодополнения. Эти пользовательские атрибуты особенно полезны для динамического управления списком через JavaScript.
<input list="product-list" placeholder="Начните вводить продукт">
<datalist id="product-list"
data-source="api/products"
data-min-chars="3"
data-category="electronics">
<option value="Смартфон">
<option value="Ноутбук">
</datalist>
Практические сценарии:
| Атрибут | Пример | Использование |
|---|---|---|
data-source |
data-source="/api/search" |
URL для динамической загрузки вариантов |
data-min-chars |
data-min-chars="2" |
Минимальное количество символов для запроса |
data-cache |
data-cache="true" |
Кэшировать ли загруженные варианты |
data-format |
data-format="json" |
Формат получаемых данных |
Динамическая обработка через JavaScript:
<input list="dynamic-list" id="searchField">
<datalist id="dynamic-list" data-source="/api/search"></datalist>
<script>
const input = document.getElementById('searchField');
const datalist = document.getElementById('dynamic-list');
input.addEventListener('input', async function() {
if(this.value.length >= parseInt(datalist.dataset.minChars || 2)) {
const response = await fetch(`${datalist.dataset.source}?q=${this.value}`);
const options = await response.json();
datalist.innerHTML = options.map(item =>
`<option value="${item.name}" data-id="${item.id}">`
).join('');
}
});
</script>
Доступ к данным через JavaScript:
<datalist id="user-list" data-role="admin">
<option value="user1" data-id="101">
<option value="user2" data-id="102">
</datalist>
<script>
const datalist = document.getElementById('user-list');
console.log(datalist.dataset.role); // "admin"
const firstOption = datalist.querySelector('option');
console.log(firstOption.dataset.id); // "101"
</script>
Рекомендации по использованию:
- Используйте осмысленные имена атрибутов, соответствующие их содержанию
- Для сложных данных применяйте JSON-сериализацию в одном атрибуте
- Избегайте хранения чувствительной информации в data-атрибутах
- Документируйте используемые data-атрибуты в проекте
- Проверяйте поддержку в целевых браузерах
Пример с JSON-данными:
<datalist id="config-list"
data-options='{"delay":300,"maxItems":10}'>
</datalist>
<script>
const datalist = document.getElementById('config-list');
const options = JSON.parse(datalist.dataset.options);
console.log(options.delay); // 300
</script>
Примечание: Атрибуты data-* предоставляют гибкий способ хранения дополнительной информации о списке вариантов автодополнения, что особенно полезно при создании динамических интерфейсов с AJAX-загрузкой данных. Они полностью поддерживаются всеми современными браузерами.