É 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