How to refresh filter when x is clicked in input?

Question

I have filter for my list

<ul>

here is my html for the

input

where I have my filter.

<h1>Image Gallery</h1>

 <div class="searchbox">

  <input type="text" placeholder="Search"  class="search" onkeyup="search()" id="myInput" >

</div>

my js
function search() {

var filter =  $('input').val().toUpperCase().split(' ');

var li = $('li');

var a = $('a');

for (var i = 0; i < li.length; i++) {

    a = li[i];

    var text = a.innerHTML.toUpperCase();

        for(var f = 0; f < filter.length; f++) {

            if (text.indexOf(filter[f]) > -1 ) {    

            li[i].style.display = '';

            //break; // don't need further matches

            } else {

            li[i].style.display = 'none';            

            }

        }

}

}

The thing that I want to is when I hit the

x

from the input and clear out letters and reload info, but doesn't reload the assets, you have to press

BACKSPACE

for this to happen. an example of this is here

you can write anything and the filter works but then click on the X inside the input only clears the letters, then you hit

BACKSPACE

and you reset the info.

so how can you do this with only th

X

from the input, only one click and:

1. clear the letters

2. but also reset the info, like if you were pressing the

BACKSPACE

Answer 1

It sounds like you want to add an event listener to the clear button ('x') inside of your input field which will run your search function (or alternatively a clear function which you create which refreshes your data).

At the moment, backspace works because the onkeyup="search()" event triggers a function call that updates your data. The simplest solution would be to create a click event for the input's 'X' that calls the same function, ideally setting the input's value to an empty string. As I mentioned you could alternatively create a 'clearSearch' function and use that as the callback function to the click event which would specifically clear the previous results and set the value of the input field to an empty string.

Edit - Add example of event listener to invoke search method:

As I mentioned above, it sounds like you have some code which generates a clear button (the 'x' you are referring to) inside of your input. I'm not sure what that is, so in my example code below I have simulated that behavior with a button (id="clearButton").

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script   src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>

<body>
<input type="text" placeholder="Search" onkeyup="search()" class="search" id="myInput" />
<!-- Added this button because I'm not sure how you are generating the 'x' -->
<input type="button" click="clear()" id="clearButton" value="X" />

<script type="text/javascript">
// Use an event listener to assign the 'clear' function to the click event on the button
window.onload = function() {
  document.getElementById("clearButton").addEventListener("click",clear);
}

  function search() {
    var filter =  $('input').val().toUpperCase().split(' ');
    var li = $('li');
    var a = $('a');
    for (var i = 0; i < li.length; i++) {
        a = li[i];
        var text = a.innerHTML.toUpperCase();
        for(var f = 0; f < filter.length; f++) {
          if (text.indexOf(filter[f]) > -1 ) {    
            li[i].style.display = '';
            //break; // don't need further matches
          } else {
            li[i].style.display = 'none';            
          }
      }
    }
  }

  function clear() {
    // Select the 'myInput' search box, and set it's value to an empty String
    document.getElementById("myInput").value = "";
    // Call seach, which should reset the result list
    search();
  }  

</script>
</body>
</html>

I used vanilla JS for the code I've added, but it will work the same with jQuery.

How to refresh filter when x is clicked in input?

Sign up