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, і зазвичай використовується для поліпшення користувацького досвіду в інтерфейсах пошуку, де потрібен миттєвий відгук на дії користувача без додаткових кліків.

правити

Порада

Якщо ви хочете відслідковувати лише завершені пошукові запити, а не кожне введення символу, подія search — саме те, що вам потрібно. Вона спрацьовує тільки тоді, коли користувач натискає Enter або очищує поле пошуку.

автор: Bond правити

Порада

Для кращої сумісності з різними браузерами поєднуйте подію search з input, особливо якщо у вас є специфічні вимоги до відображення результатів пошуку в реальному часі. Це забезпечить більш передбачувану поведінку на старих платформах.

автор: Bond правити

Порада

Подія search може бути корисною для оптимізації динамічних запитів на сервер. Якщо ви хочете обмежити кількість запитів під час набору тексту, подія search дозволяє запускати запити тільки тоді, коли користувач завершив введення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

searchInput.addEventListener('search', function(event) {
  // Код обробки події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<input type="text" id="searchBox" value="текст для прикладу" placeholder="Введи щось">
<div id="results">Демонстраційний елемент</div>

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 = 'Поле пошуку порожнє';
  }
});

<input type="text" id="searchBox" value="текст для прикладу" placeholder="Введи щось">
<div class="item">перший елемент item</div>
<div class="item">другий елемент item</div>

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');
  }
});