-1

Pessoal eu fiz essa função que quando carrega a tela o tabfoundUsers inicia vazio e medida que eu altero o input text os users são filtrados, mas quando eu removo todo conteúdo do input não esvazia o tabfoundUsers, na verdade retorna todos os users que estão no json, qual será o problema que eu não consigo ver?

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>`;
  }
}
2
  • 1
    Qual a relação de node.js com o código acima? Me parece que o código é executado em navegador ou hibridos, o q não tem haver com o deploy geralmente em nodejs e nem com back-end em nodejs.
    – Syzoth
    Commented 25/05/2020 às 20:26
  • Talvez ele esteja utilizando node.js em algum ponto, mas realmente o problema não tem relação com node.js, removi a tag em uma edição. Commented 28/05/2020 às 12:42

1 Resposta 1

0

É possível verificar e trabalhar com o conteúdo da variável hasText (event.target.value) antes de efetuar o filtro.

Se ela possuir valor, você efetua o filtro, caso contrário pode só utiliza os valores já existentes na 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-->

Também é possível deixar o valor vazio caso hasText não tenha valor, basta fazer a mesma lógica, porém sem o else, mantendo assim uma lista vazia na variável 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-->


Veja uma outra possível forma de implementar:

/*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-->


Se necessário implementar a pesquisa de forma a ignorar a caixa alta, você pode optar por utilizar os métodos toLowerCase ou toUpperCase e com isso fazer a comparação toda em minúscula ou toda em maiúscula, abaixo um exemplo utilizando toLowerCase, comparando assim todos os dados em minúsculas:

/*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.: Como em seu exemplo não tinha o valor de algumas variáveis e HTML, criei alguns dados fictícios para reprodução e exemplificação.


Documentações:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/join

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/contains

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Condicional

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementById

1
  • 1
    Valeu cara! Da forma que você falou ficou igual, mas me ajudou a ver que uma pequena alteração iria resolver o que eu queria, no else fiz o filteredUsers receber o vetor vazio e agora quando removo o texto do input o conteúdo do tabFoundUsers apaga Commented 25/05/2020 às 21:50

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .