Эффективные автокомплиты в формах: ускоряем заполнение на 40%

<form>
<label for="city">Выберите город:</label>
<input type="text" id="city" name="city" list="cities">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Екатеринбург">
<option value="Новосибирск">
<option value="Казань">
</datalist>
</form>

/* Стилизация поля ввода */
input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}

input:focus {
border-color: #4285f4;
outline: none;
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

/* Стилизация опций в выпадающем списке */
/* Примечание: возможности стилизации datalist ограничены */
option {
padding: 8px;
font-size: 14px;
}

<div class="autocomplete-container">
<label for="search-input">Поиск товара:</label>
<input type="text" id="search-input" placeholder="Начните вводить...">
<div id="suggestions-container" class="suggestions-container"></div>
</div>

<style>
.autocomplete-container {
position: relative;
width: 100%;
max-width: 400px;
}

#search-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

.suggestions-container {
position: absolute;
width: 100%;
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 4px 4px;
background: white;
z-index: 1000;
display: none;
}

.suggestion-item {
padding: 10px 12px;
cursor: pointer;
}

.suggestion-item:hover, .suggestion-item.active {
background-color: #f0f7ff;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('search-input');
const suggestionsContainer = document.getElementById('suggestions-container');

// Пример данных (в реальном проекте могут загружаться с сервера)
const items = [
'Смартфон iPhone 13',
'Смартфон Samsung Galaxy S21',
'Ноутбук MacBook Pro',
'Ноутбук Dell XPS 13',
'Планшет iPad Air',
'Умные часы Apple Watch',
'Наушники Sony WH-1000XM4',
'Фотоаппарат Canon EOS R5'
];

searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();
suggestionsContainer.innerHTML = '';

if (query.length < 2) {
suggestionsContainer.style.display = 'none';
return;
}

// Фильтрация данных
const filteredItems = items.filter(item => 
item.toLowerCase().includes(query)
);

if (filteredItems.length === 0) {
suggestionsContainer.style.display = 'none';
return;
}

// Создание элементов подсказок
filteredItems.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
div.className = 'suggestion-item';

div.addEventListener('click', function() {
searchInput.value = item;
suggestionsContainer.style.display = 'none';
});

suggestionsContainer.appendChild(div);
});

suggestionsContainer.style.display = 'block';
});

// Скрытие подсказок при клике вне поля и контейнера
document.addEventListener('click', function(e) {
if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
suggestionsContainer.style.display = 'none';
}
});

// Навигация с помощью клавиатуры
searchInput.addEventListener('keydown', function(e) {
const items = document.querySelectorAll('.suggestion-item');
const activeItem = document.querySelector('.suggestion-item.active');
let index = -1;

if (items.length === 0) return;

if (activeItem) {
index = Array.from(items).indexOf(activeItem);
}

// Нажатие клавиши "вниз"
if (e.key === 'ArrowDown') {
e.preventDefault();
index = (index + 1) % items.length;

if (activeItem) activeItem.classList.remove('active');
items[index].classList.add('active');
} 
// Нажатие клавиши "вверх"
else if (e.key === 'ArrowUp') {
e.preventDefault();
index = index < 0 ? items.length – 1 : (index – 1 + items.length) % items.length;

if (activeItem) activeItem.classList.remove('active');
items[index].classList.add('active');
}
// Нажатие клавиши "Enter"
else if (e.key === 'Enter' && activeItem) {
e.preventDefault();
searchInput.value = activeItem.textContent;
suggestionsContainer.style.display = 'none';
}
});
});
</script>

searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();

if (query.length < 2) {
suggestionsContainer.style.display = 'none';
return;
}

// Отмена предыдущего запроса если есть
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}

// Дебаунсинг для предотвращения лишних запросов
this.timeoutId = setTimeout(() => {
fetch(`/api/search?q=${encodeURIComponent(query)}`)
.then(response => response.json())
.then(data => {
suggestionsContainer.innerHTML = '';

if (data.length === 0) {
suggestionsContainer.style.display = 'none';
return;
}

data.forEach(item => {
const div = document.createElement('div');
div.className = 'suggestion-item';

// Подсветка совпадающей части запроса
const regex = new RegExp(`(${query})`, 'gi');
div.innerHTML = item.name.replace(regex, '<b>$1</b>');

div.addEventListener('click', function() {
searchInput.value = item.name;
suggestionsContainer.style.display = 'none';

// Дополнительное действие после выбора
if (typeof onItemSelect === 'function') {
onItemSelect(item);
}
});

suggestionsContainer.appendChild(div);
});

suggestionsContainer.style.display = 'block';
})
.catch(error => {
console.error('Ошибка загрузки подсказок:', error);
});
}, 300); // Задержка в 300 мс для дебаунсинга
});

<!-- Подключаем CSS и JavaScript библиотеки -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/awesomplete@1.1.5/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete@1.1.5/awesomplete.min.js"></script>

<!-- HTML-разметка -->
<div class="form-group">
<label for="city-input">Город:</label>
<input id="city-input" class="awesomplete" />
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
// Инициализация Awesomplete с массивом городов
new Awesomplete(document.getElementById("city-input"), {
list: ["Москва", "Санкт-Петербург", "Новосибирск", "Екатеринбург", "Казань", 
"Нижний Новгород", "Челябинск", "Омск", "Самара", "Ростов-на-Дону"],
minChars: 1,
maxItems: 5,
autoFirst: true
});

// Для динамической загрузки данных с сервера
// Раскомментируйте этот код и замените URL на ваш API
/*
const input = document.getElementById("city-input");
let awesompleteInstance = null;

input.addEventListener("input", function() {
// Отмена предыдущего запроса при продолжении ввода
if (this.timeout) clearTimeout(this.timeout);

if (this.value.length < 2) return;

this.timeout = setTimeout(() => {
fetch(`/api/cities?query=${encodeURIComponent(this.value)}`)
.then(response => response.json())
.then(data => {
// Обновляем список
if (awesompleteInstance) {
awesompleteInstance.list = data;
} else {
awesompleteInstance = new Awesomplete(input, {
list: data,
minChars: 1,
maxItems: 10,
autoFirst: true
});
}
});
}, 300);
});
*/
});
</script>

<!-- Подключаем jQuery и jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<!-- HTML-разметка -->
<div class="form-group">
<label for="product-search">Поиск товара:</label>
<input id="product-search" type="text" placeholder="Начните вводить название...">
</div>

<script>
$(function() {
$("#product-search").autocomplete({
source: function(request, response) {
$.ajax({
url: "/api/products/search",
dataType: "json",
data: {
query: request.term
},
success: function(data) {
// Преобразуем данные в формат, ожидаемый autocomplete
response($.map(data, function(item) {
return {
label: item.name,
value: item.name,
id: item.id,
image: item.thumbnail
};
}));
}
});
},
minLength: 2, // Минимальное количество символов для запуска поиска
select: function(event, ui) {
console.log("Выбран товар: " + ui.item.label + " (ID: " + ui.item.id + ")");
// Здесь можно добавить дополнительные действия при выборе
}
}).autocomplete("instance")._renderItem = function(ul, item) {
// Кастомизируем отображение элементов в выпадающем списке
return $("<li>")
.append("<div class='autocomplete-item'>" +
"<img src='" + item.image + "' alt='' class='thumbnail'>" +
"<span class='item-name'>" + item.label + "</span>" +
"</div>")
.appendTo(ul);
};
});
</script>

<style>
.autocomplete-item {
display: flex;
align-items: center;
padding: 5px;
}

.autocomplete-item .thumbnail {
width: 40px;
height: 40px;
object-fit: cover;
margin-right: 10px;
}

.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
</style>

/* CSS для мобильно-оптимизированного автокомплита */
@media (max-width: 768px) {
/* Увеличиваем размер поля ввода для удобства тач-ввода */
.autocomplete-input {
height: 48px;
font-size: 16px; /* Предотвращает автоматический зум на iOS */
padding: 12px 16px;
}

/* Увеличиваем высоту элементов списка для удобства выбора */
.suggestion-item {
padding: 14px 16px;
min-height: 48px;
}

/* Устанавливаем максимальную высоту списка подсказок */
.suggestions-container {
max-height: 60vh; /* Ограничиваем высоту 60% высоты вьюпорта */
position: fixed; /* Фиксированное позиционирование для мобильных */
left: 0;
right: 0;
z-index: 1050;
border-radius: 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Добавляем затемнение фона при активном автокомплите */
.autocomplete-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1040;
display: none;
}

.autocomplete-active .autocomplete-backdrop {
display: block;
}
}

// Определяем, является ли устройство мобильным
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

// Адаптируем поведение автокомплита для мобильных устройств
if (isMobile) {
// Используем дебаунсинг с большей задержкой на мобильных
const debounceTime = 500; // ms

// Уменьшаем количество показываемых результатов
const maxMobileResults = 5;

// Добавляем обработку закрытия подсказок по клику вне
document.addEventListener('touchstart', function(e) {
if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
suggestionsContainer.style.display = 'none';
// Убираем затемнение фона если оно есть
document.querySelector('.autocomplete-backdrop')?.style.display = 'none';
}
});

// Создаем затемнение фона для фокусировки внимания
searchInput.addEventListener('focus', function() {
let backdrop = document.querySelector('.autocomplete-backdrop');
if (!backdrop) {
backdrop = document.createElement('div');
backdrop.className = 'autocomplete-backdrop';
document.body.appendChild(backdrop);
}

// Показываем затемнение только если есть подсказки
if (suggestionsContainer.style.display === 'block') {
backdrop.style.display = 'block';
}
});

// Предзагружаем популярные запросы при фокусе
searchInput.addEventListener('focus', function() {
if (!this.value && popularQueries) {
displaySuggestions(popularQueries);
}
});

// Оптимизируем обработку скролла в списке подсказок
suggestionsContainer.addEventListener('touchmove', function(e) {
e.stopPropagation(); // Предотвращаем скролл страницы под списком
}, { passive: false });

// Меняем стратегию загрузки данных для экономии трафика
function loadSuggestions(query) {
// Отменяем предыдущий запрос
if (currentRequest) {
currentRequest.abort();
}

// Используем кеширование для экономии трафика
const cacheKey = query.trim().toLowerCase();
if (suggestionsCache[cacheKey]) {
displaySuggestions(suggestionsCache[cacheKey]);
return;
}

// Запрашиваем только необходимые поля для экономии трафика
currentRequest = fetch(`/api/suggestions?q=${encodeURIComponent(query)}&limit=${maxMobileResults}&fields=name,id`)
.then(response => response.json())
.then(data => {
suggestionsCache[cacheKey] = data;
displaySuggestions(data);
});
}
}