Question

0

343

Visualizações

How to simulate keypress to clear input and refresh filter using JavaScript?

I'm trying to add a button that can clear the values of search input and also remove any filters (which is normally done by pressing a button such as backspace)..

I've tried calling the same function that does the filter but it didn't seem to work. I've been trying it with no luck until now...

Please see my code so far:

// 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>

What's the proper way of actually clearing the filter? I've tried searching and searching but the only result online is this: How to refresh filter search WHEN the "clear button" at the edge of a text <input> is clicked?

Thank you in advance for any help.

about 4 years ago · Juan Pablo Isaza

2 Respostas

Responde à pergunta

0

change function clearSearchFilterInput like below is simplest way in this code i think

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-06-30T06:47:20.899Z

You are reading undefined at

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

since you don't pass any event object to the function

searchFilterDivsMenu();

You could emulate the event like

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>

0

343

How to simulate keypress to clear input and refresh filter using JavaScript?

2 Respostas

0

0

Encontrar trabalhos remotos

Andres GPT