Как имитировать нажатие клавиши для очистки ввода и обновления фильтра с помощью JavaScript?

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

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

Пожалуйста, смотрите мой код до сих пор:

// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
    var filter = e.target.value.toUpperCase();
    var list = document.getElementById("links-list");
    var divs = list.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        var a = divs[i].getElementsByTagName("a")[0];
        if (a) {
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                divs[i].style.display = "";
            } else {
                divs[i].style.display = "none";
            }
        }
    }
}

// Clear input and filter
function clearSearchFilterInput() {
    document.getElementById('search-filter-cards').value = "";
    searchFilterDivsMenu();
}

<div id = "anchor-cards-list">
  <input id = "search-filter-cards" type = "text">
  <div id = "links-list">

    <div class = "card">
      <a href = "#">example</a>
    </div>
    <div class = "card">
      <a href = "#">AAA</a>
    </div>
    <div class = "card">
      <a href = "#">BBB</a>
    </div>
  </div>

  <button onclick = "clearSearchFilterInput();">Clear and Reset Search</button>

Каков правильный способ очистки фильтра? Я пытался искать и искать, но единственный результат в Интернете: Как обновить фильтр поиска, КОГДА нажата «кнопка очистки» на краю текста <input>?

Спасибо заранее за любую помощь.

javascript html

06.05.2022 09:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

изменить функцию clearSearchFilterInput, как показано ниже, это самый простой способ в этом коде, я думаю

function clearSearchFilterInput() {
    document.getElementById('search-filter-cards').value = "";
    input.dispatchEvent(new Event("input"));
}

// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
    var filter = e.target.value.toUpperCase();
    var list = document.getElementById("links-list");
    var divs = list.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        var a = divs[i].getElementsByTagName("a")[0];
        if (a) {
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                divs[i].style.display = "";
            } else {
                divs[i].style.display = "none";
            }
        }
    }
}

// Clear input and filter
function clearSearchFilterInput() {
    document.getElementById('search-filter-cards').value = "";
    input.dispatchEvent(new Event("input"));
}

<div id = "anchor-cards-list">
  <input id = "search-filter-cards" type = "text">
  <div id = "links-list">

    <div class = "card">
      <a href = "#">example</a>
    </div>
    <div class = "card">
      <a href = "#">AAA</a>
    </div>
    <div class = "card">
      <a href = "#">BBB</a>
    </div>
  </div>

  <button onclick = "clearSearchFilterInput();">Clear and Reset Search</button>

06.05.2022 09:34

Ответ принят как подходящий

Вы читаете undefined в

var filter = e.target.value.toUpperCase();

так как вы не передаете какой-либо объект события в функцию

searchFilterDivsMenu();

Вы можете эмулировать событие, например

input.dispatchEvent(new Event("input"));

// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
    var filter = e.target.value.toUpperCase();
    var list = document.getElementById("links-list");
    var divs = list.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        var a = divs[i].getElementsByTagName("a")[0];
        if (a) {
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                divs[i].style.display = "";
            } else {
                divs[i].style.display = "none";
            }
        }
    }
}

// Clear input and filter
function clearSearchFilterInput() {
    document.getElementById('search-filter-cards').value = "";
    input.dispatchEvent(new Event("input"));
}

<div id = "anchor-cards-list">
  <input id = "search-filter-cards" type = "text">
  <div id = "links-list">

    <div class = "card">
      <a href = "#">example</a>
    </div>
    <div class = "card">
      <a href = "#">AAA</a>
    </div>
    <div class = "card">
      <a href = "#">BBB</a>
    </div>
  </div>

  <button onclick = "clearSearchFilterInput();">Clear and Reset Search</button>

06.05.2022 09:36

Другие вопросы по теме

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

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

Как расположить заголовок и кнопку по центру на одной строке?

Сосчитайте до миллиарда за несколько секунд без зависания браузера

Кнопка при нажатии не работает до перезагрузки страницы

Удалить вертикальные поля между дочерними элементами Flex

Проблема, заключающаяся в том, что javascript не может быть применен в зависимости от того, установлен ли параметр URL

Измените цвет фона ячейки таблицы, если ее содержимое отличается от содержимого другой ячейки

Как я могу использовать методы из файла .py в теге html py-script

Отображать значение координат во вводном тексте после нажатия кнопки

Как имитировать нажатие клавиши для очистки ввода и обновления фильтра с помощью JavaScript?

Ответы 2

Другие вопросы по теме

Похожие вопросы