JS властивість Event.search
Загальний опис
search — це подія, яка генерується елементом <input> з типом search щоразу, коли користувач натискає кнопку скидання (clear) або закінчує введення пошукового запиту. Ця подія дозволяє реагувати на дії користувача під час роботи з пошуковими полями, а також обробляти введені дані або очищення поля пошуку.
Подія search є унікальною для полів типу search і автоматично спрацьовує, коли користувач натискає на кнопку очищення у полі або підтверджує завершення пошуку. Використання події може бути корисним для динамічних інтерфейсів, де результати пошуку відображаються без перезавантаження сторінки. Наприклад, можна оновити список результатів пошуку або очистити попередні дані після натискання кнопки "Очистити".
Приклад використання:
const searchInput = document.getElementById('searchBox');
searchInput.addEventListener('search', function(event) {
console.log('Пошуковий запит:', searchInput.value);
});
У цьому прикладі подія search фіксує момент завершення пошуку, і в консоль виводиться текст, який ввів користувач.
Також можна обробити подію скидання поля (коли користувач натискає на кнопку очищення). Наприклад:
searchInput.addEventListener('search', function(event) {
if (searchInput.value === '') {
console.log('Поле пошуку очищено');
}
});
Тут відслідковується момент, коли поле пошуку очищується. Це може бути корисно для автоматичного оновлення інтерфейсу (наприклад, повернення до початкового стану після завершення пошуку).
Важливо врахувати, що подія search не генерується для всіх браузерів однаково, тому для більш складних додатків слід комбінувати її з подією input, щоб забезпечити коректну роботу на різних платформах.
Подія search є більш вузькоспеціалізованою, ніж подія input, і зазвичай використовується для поліпшення користувацького досвіду в інтерфейсах пошуку, де потрібен миттєвий відгук на дії користувача без додаткових кліків.
| Порада: | Якщо ви хочете відслідковувати лише завершені пошукові запити, а не кожне введення символу, подія |
| Порада: | Для кращої сумісності з різними браузерами поєднуйте подію |
| Порада: | Подія |
Синтаксис
searchInput.addEventListener('search', function(event) {
// Код обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує, як за допомогою події search та input можна фільтрувати список елементів при введенні тексту в поле пошуку. Кнопка дозволяє вимкнути або ввімкнути автоматичний пошук у режимі реального часу, що дає користувачеві більше контролю над списком фільтрованих результатів.
У цьому прикладі реалізовано динамічний пошук із показом результатів. Якщо поле пошуку очищено, то результати також скидаються, що зручно для пошукових інтерфейсів.
const searchInput = document.getElementById('searchBox');
const resultsContainer = document.getElementById('results');
searchInput.addEventListener('search', function(event) {
const query = searchInput.value.trim();
if (query) {
// Імітація пошукового запиту та відображення результатів
resultsContainer.textContent = `Результати для: ${query}`;
} else {
// Очищення результатів, коли поле пошуку очищено
resultsContainer.textContent = 'Поле пошуку порожнє';
}
});Цей код дозволяє користувачеві фільтрувати список елементів у реальному часі через поле пошуку. Після натискання кнопки очищення всі елементи повертаються до початкового вигляду.
const searchInput = document.getElementById('searchBox');
const itemList = document.querySelectorAll('.item');
searchInput.addEventListener('search', function(event) {
const query = searchInput.value.trim().toLowerCase();
itemList.forEach(item => {
if (item.textContent.toLowerCase().includes(query)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
if (!query) {
// Показуємо всі елементи, якщо пошук очищено
itemList.forEach(item => item.style.display = 'block');
}
});