Function does not remove HTML content when input text content is removed

Question

Guys I did this function that when you load the screen the tabfoundUsers starts empty and as I change input text users are filtered, but when I remove all content from the input does not empty the tabfoundUsers, actually returns all the users that are in json, what will be the problem that I can’t see?

function render() {
  renderFoundUsers();
}

function renderFoundUsers() {
  let hasText = null;

  searchUsers.addEventListener("keyup", handleTyping);

  function handleTyping(event) {
    hasText = event.target.value;

    const filteredUsers = foundUsers
      ? foundUsers.filter(({ name }) => name.includes(hasText))
      : (foundUsers = []);

    const usersHTML = filteredUsers
      .map(({ name }) => {
        return `
      <div>
        <ul>
          <li>${name}</li>
        </ul>
      </div>
      `;
      })
      .join("");

    tabfoundUsers.innerHTML = `<div>${usersHTML}</div>`;
  }
}

Answer 1

You can check and work with the contents of the variable hasText (event.target.value) before making the filter.

If it has value, you perform the filter, otherwise you can only use the values already existing in the foundUsers:

/*Dados para reprodução*/
const searchUsers = document.getElementById("searchUsers");
const tabfoundUsers = document.getElementById("tabfoundUsers");

const foundUsers = [
  { name: "Rafael" },
  { name: "Costa" }
];
/*Dados para reprodução*/

function render() {
  renderFoundUsers();
}

function renderFoundUsers() {    
  searchUsers.addEventListener("keyup", handleTyping);

  function handleTyping(event) {
    const hasText = event.target.value;

    let filteredUsers;

    if (hasText) {
        filteredUsers = foundUsers.filter(({ name }) => name.includes(hasText));
    } else {
        filteredUsers = foundUsers;
    }

    const usersHTML = filteredUsers
      .map(({ name }) => {
        return `
      <div>
        <ul>
          <li>${name}</li>
        </ul>
      </div>
      `;
      })
      .join("");

    tabfoundUsers.innerHTML = `<div>${usersHTML}</div>`;
  }
}

render();

<!--Dados para reprodução-->
<input id="searchUsers">
<div id="tabfoundUsers"></div>
<!--Dados para reprodução-->

It is also possible to leave the value empty if hasText has no value, just make the same logic, but without the else, thus keeping an empty list in the variable filteredUsers:

/*Dados para reprodução*/
const searchUsers = document.getElementById("searchUsers");
const tabfoundUsers = document.getElementById("tabfoundUsers");

const foundUsers = [
  { name: "Rafael" },
  { name: "Costa" }
];
/*Dados para reprodução*/

function render() {
  renderFoundUsers();
}

function renderFoundUsers() {    
  searchUsers.addEventListener("keyup", handleTyping);

  function handleTyping(event) {
    const hasText = event.target.value;

    let usersHTML = "";

    if (hasText) {
        const filteredUsers = foundUsers.filter(({ name }) => name.includes(hasText));

        usersHTML = filteredUsers
        .map(({ name }) => {
        return `
        <div>
        <ul>
          <li>${name}</li>
        </ul>
        </div>
        `;
        })
        .join("");
    }

    tabfoundUsers.innerHTML = `<div>${usersHTML}</div>`;
  }
}

render();

<!--Dados para reprodução-->
<input id="searchUsers">
<div id="tabfoundUsers"></div>
<!--Dados para reprodução-->

---

See another possible way to implement:

/*Dados para reprodução*/
const searchUsers = document.getElementById("searchUsers");
const tabfoundUsers = document.getElementById("tabfoundUsers");

const foundUsers = [
  { name: "Rafael" },
  { name: "Costa" }
];
/*Dados para reprodução*/

function render() {
  searchUsers.addEventListener("keyup", (event) => {
  const filteredUsers = event.target.value ? foundUsers.filter(({ name }) => name.includes(event.target.value)) : [];

  tabfoundUsers.innerHTML = `<div>${filteredUsers
    .map(({ name }) => {
    return `
    <div>
    <ul>
      <li>${name}</li>
    </ul>
    </div>
    `;
    })
    .join("")}</div>`;
  });
}

render();

<!--Dados para reprodução-->
<input id="searchUsers">
<div id="tabfoundUsers"></div>
<!--Dados para reprodução-->

---

If you need to implement the search in a way that ignores the high box, you can choose to use the methods toLowerCase or toUpperCase and with this make the entire comparison in lowercase or all in uppercase, below an example using toLowerCase, thus comparing all data in lower case:

/*Dados para reprodução*/
const searchUsers = document.getElementById("searchUsers");
const tabfoundUsers = document.getElementById("tabfoundUsers");

const foundUsers = [
  { name: "Rafael" },
  { name: "Costa" }
];
/*Dados para reprodução*/

function render() {
  searchUsers.addEventListener("keyup", (event) => {
  const hasText = event.target.value.toLowerCase();
  const filteredUsers = hasText ? foundUsers.filter(({ name }) => name.toLowerCase().includes(hasText)) : [];

  tabfoundUsers.innerHTML = `<div>${filteredUsers
    .map(({ name }) => {
    return `
    <div>
    <ul>
      <li>${name}</li>
    </ul>
    </div>
    `;
    })
    .join("")}</div>`;
  });
}

render();

<!--Dados para reprodução-->
<input id="searchUsers">
<div id="tabfoundUsers"></div>
<!--Dados para reprodução-->

Obs.: As in your example did not have the value of some variables and HTML, I created some dummy data for reproduction and exemplification.

---

Documentations:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/contains

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operador_Condicional

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById