How do I clear an input search field with a 'x' button with JavaScript?

Question

I have this search which filters the elements directly when I type letters in the input field. And now I want to reset the search by clicking on the 'x'.

So far the filter only reacts 'live' and goes back to the initial state when I delete the letters with the backspace key. But when I click on the 'x' it just deletes my written letters. Other than that nothing happens and I have to press 'enter' in the input field to reset the search again.

But I would really love the search to reset itself (without having to press 'enter') when I click on the 'x' button.

That's my search in HTML. The span id="clear" is the 'x' button I'm talking about.

<div id="Search">
    <div class="icon"></div>
    <div class="input">
        <input type="text" placeholder="nach AdSpecial suchen" id="adSearch" onkeyup="search_ads()">
    </div>
    <span id="clear" onclick="clearSearch()"></span>
</div>

And that's my JavaScript code. All my elements that I want to filter have the class '.filterDiv'.

const search = document.getElementById("Search");
const items = document.querySelectorAll(".filterDiv");

function search_ads() {
  let input = document.getElementById('adSearch').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('filterDiv');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="";                 
        }
    }
}

function clearSearch() {
  document.getElementById('adSearch').value="";
}

This is my first post here, so I apologise if I forgot to mention some important informations!

score 0 · Answer 1 · answered Nov 04 '22 at 17:19

For clearing, you can add this line:

document.querySelectorAll('.filterDiv').forEach(el => el.style.display = 'block')

I would recommend looking into document.querySelector and document.querySelectorAll as they are much cleaner to use than document.getElementByID and document.getElementsByClassName.

To generally improve your code:

const search = document.querySelector('#adSearch'),
      items = document.querySelectorAll('.filterDiv'),
      clear = document.querySelector('#clear');

search.onkeyup = e => {
  let query = search.value.toLowerCase();
  for(let item of items){
    item.style.display = item.innerHTML.includes(input) ? 'none' : 'block';
  }
}


clear.onclick = e => {
  search.value = '';
  items.forEach(el => el.style.display = 'block');
}

Hey, thanks for your recommendation. Since I'm a newbie in JavaScript, your recommendation really helps me out! Thank you! — Linh, Nov 04 '22 at 17:53

score 0 · Accepted Answer · answered Nov 04 '22 at 17:37

In your clear function just call the search function after clearing the input.

function clearSearch() {
  document.getElementById('adSearch').value="";
  search_ads();
}

This will search ads for the now empty input (so you basically reset them aswell)

May I also suggest a little improvement:

Instead of calling the search function on each keyup-event you could call it on each oninput-event (see this question for more information on this) https://stackoverflow.com/a/26202266/19529102)

Wow... it can be so simple. Thank you very much! And thanks for the tip – I will look into that! — Linh, Nov 04 '22 at 17:51

How do I clear an input search field with a 'x' button with JavaScript?

2 Answers2