How to trigger JavaScript event when input field is cleared?

Question

I'm trying to make an instant search box. When user start typing in the search box, it triggers a javascript event to hide the blog posts (#home) and search results will be shown instead (this part of the script is not included below). However, after user cleared the search box, they see just a blank page as the display of #home is still set to be none.

How can I make JavaScript detect the user cleared the input filed at #search-input and make #home display true again?

document.getElementById('search-input').oninput = function() {
    document.getElementById('home').style.display = 'none';
};

enter image description here

Carl Edwards · Accepted Answer · 2017-12-03 02:02:04Z

3

You can do this through the input event listener. To hide the #home element, add a conditional to check if the input has a value. If it doesn't then you hide it. To bring it back you do the opposite but only if #home is hidden:

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');

searchInput.addEventListener('input', function() {
    if (!this.value) {
        home.style.display = 'none';
    } else if (this.value && home.style.display === 'none') {
      home.style.display = 'block';
    }
});

<input id="search-input" type="text"/>

<div id="home">
  Sample Content
</div>

edited Dec 3, 2017 at 2:02

answered Dec 3, 2017 at 1:56

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carl Edwards Over a year ago

Glad I was able to help out. Good luck!

Cecilia Lee · Accepted Answer · 2017-12-03 02:23:41Z

0

Thanks for the help of Carl Edwards!

Here is the final code that works perfectly:

const searchInput = document.getElementById('search-input');
const home = document.getElementById('home');
const results = document.getElementById('results');

searchInput.addEventListener('input', function() {
    if (this.value) {
        home.style.display = 'none';
        results.style.display = 'inline';
    } else if (!this.value && home.style.display === 'none') {
      home.style.display = 'block';
      results.style.display = 'none';
    }
});

answered Dec 3, 2017 at 2:23

Cecilia Lee

8351 gold badge14 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to trigger JavaScript event when input field is cleared?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related