I have filter for my list
<ul>
input
<h1>Image Gallery</h1>
<div class="searchbox">
<input type="text" placeholder="Search" class="search" onkeyup="search()" id="myInput" >
</div>
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';
}
}
}
x
BACKSPACE
BACKSPACE
X
BACKSPACE
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:
<!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.