Clear search bar-CodePudding

I want to clear a search bar. The idea was to search through a list in a table. A search function is called onkeyup from an input then I added an icon eraser that clears the input onclick (span).

Even though the input is cleared, the search is still displayed with the list of result from the search. I would like to get back to the whole list on the click of the eraser icon. Any suggestion?

function search() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("list");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i  ) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j  ) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
      }
    }
    if (found) {
      tr[i].style.display = "";
      found = false;
    } else if (!tr[i].id.match('^tableHeader')) {
      tr[i].style.display = "none";
    }
  }
};

<div >
  <form action="">
    <input type="search" id="searchInput" onkeyup="search()" placeholder="Search..." title="Type in anything">
    <span id="clearSearch" onclick="document.getElementById('searchInput').value = null;">
            <i ></i>
        </span>
  </form>
</div>

CodePudding user response：

You mean adding search to the event handler of the clear?

Note I moved the inline event handlers and changed to the better "input" event since it handles paste too and changed the null to an empty string

It would have been easier to test if I had your table

window.addEventListener("DOMContentLoaded", function() {
  document.getElementById("clearSearch").addEventListener("click", function() {
    document.getElementById('searchInput').value = "";
    search();
  });
  document.getElementById("searchInput").addEventListener("input", search)  
});

const search = () => {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("list");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i  ) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j  ) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
      }
    }
    if (found) {
      tr[i].style.display = "";
      found = false;
    } else if (!tr[i].id.match('^tableHeader')) {
      tr[i].style.display = "none";
    }
  }
};
window.addEventListener("DOMContentLoaded", function() {
  document.getElementById("clearSearch").addEventListener("click", function() {
    document.getElementById('searchInput').value = "";
    search();
  });
  document.getElementById("searchInput").addEventListener("input", search)  
});

<div >
  <form action="">
    <input type="search" id="searchInput"  placeholder="Search..." title="Type in anything">
    <span id="clearSearch">
            <i ></i>
        </span>
  </form>
</div>

<table id="list"><tbody>
<tr><td>Some text</td></tr> 
</tbody></table>