JQuery Busca com Jquery para filtrar ícones na pagina

bigbossbr · 28 de fevereiro de 2021

Olá pessoal,

Estou tentando criar um sistema de busca por Jquery, mais empaquei em uma parte e não vai.

Tenho lista de icones em minha pagina neste modelo (total de 1036 icones)

<div class="custom-control custom-control-md mb-2 fs-20px div-icon-page"><label for="ni ni-centos"><input type="radio" name="add-icon-page" class="add-icon-page" value="ni ni-centos" id="ni ni-centos" /><em id="ni ni-centos" class="select-icon ni ni-centos"></em></label></div>
<div class="custom-control custom-control-md mb-2 fs-20px div-icon-page"><label for="ni ni-covid"><input type="radio" name="add-icon-page" class="add-icon-page" value="ni ni-covid" id="ni ni-covid" /><em id="ni ni-covid" class="select-icon ni ni-covid"></em></label></div>
<div class="custom-control custom-control-md mb-2 fs-20px div-icon-page"><label for="ni ni-fedora"><input type="radio" name="add-icon-page" class="add-icon-page" value="ni ni-fedora" id="ni ni-fedora" /><em id="ni ni-fedora" class="select-icon ni ni-fedora"></em></label></div>

O que quero é que quando o usuário ir digitando por exemplo covid, a busca filtre e deixe aparecendo somente o icone que ele esta buscando, ou similares pela busca, o código abaixo até traz um arrary no console, mais não estou sabendo como manipular esta informação para filtrar e fazer os ícones que não estão no filtro serem ocultados (no caso dar um display: none na div div-icon-page) e caso o filtro seja retirado as div ocultadas voltem a aparecer. Inclusive notei que independente do que eu digite ele sempre retorna o mesmo resultado, logo ele não esta usando o valor digitado para filtrar.

$('.input-search').keyup(function () {

    var texto = $(this).val();
    var array = Array();

    var elemento = $(".add-icon-page");
    $.each(elemento, function (index, value) {
        var valor = value.id;
        var id = index;
        array.push(id, valor);
    });
    console.log(array)
})

Rui Guilherme · 28 de fevereiro de 2021

Você pode simplificar isso usando o filter. (Fiz um exemplo, porém pesquisando em uma simples Array, você pode ajustar para funcionar com um objeto.

HTML:

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<input type="filter" class="filter" />
<p class="resultado"></p>

</body>
</html>

JQuery:

$(".filter").keyup((eventData) => {
  //pega o valor digitado pelo usuario e salva em filtroInput
  const filtroInput = eventData.target.value
  //essa array pode ser uma array de objetos também, contendo o link para o icone, nome e a id. 
  //para simplificar usei uma array simples
  const iconesDisponiveis = ["Dragão", "Avião", "Casa", "Fogo", "Face", "Computador", "Notebook"]
  //aqui ele filtra de acordo com o valor que o usuario entrou
  const result = iconesDisponiveis.filter(ico => ico.toLowerCase().indexOf(filtroInput.toLowerCase()) !== -1);
  //coloca o resultado na tela
  $(".resultado").text(result)
})

Você pode testar aqui: https://codepen.io/ruiguilherme/pen/NWbYRmx?editors=1010

bigbossbr · 28 de fevereiro de 2021

@Rui Guilherme opa Rui, obrigado pela resposta.

Fazer a busca desta forma com ele trazendo um texto na tela de certo, estou me batendo para ele continuar a montar a tela com os ícones como eu já tenho ela, dentro das divs organizadas. Eu coloco na div para estiliza melhor e com um input checkbox oculto no formulário para poder pegar o value e cadastrar no banco, porém como tem mais de 1000 ícones, achei que um filtro facilita mais a vida do usuário hehehe.

Rui Guilherme · 28 de fevereiro de 2021

@bigbossbr Você pode remover o código HTML antes de adicionar o novo o importante é manter os icons no JS e não no HTML/CSS, segue o exemplo:

HTML: (Ao carregar a página todos os icons são apresentandos.)

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- Estou usando o <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">  -->
</head>
<body>

<input type="filter" class="filter" />
  <div id="icones">
<!--   Esse submitIcon é apenas um exemplo de um evento, você pode fazer ele no checkbox.   -->
    <i onclick="submitIcon('Alarme')" class="bi bi-alarm"></i>
    <i onclick="submitIcon('Asterisk')" class="bi bi-asterisk"></i>
    <i onclick="submitIcon('Bicicleta')" class="bi bi-bicycle"></i>
    <i onclick="submitIcon('Camera')" class="bi bi-camera-fill"></i>
    <i onclick="submitIcon('Relogio')" class="bi bi-clock"></i>
  </div>

</body>
</html>

JQuery: (Quando ele digita alguma coisa no input os icons saem do HTML e apenas o JS faz o controle deles)

$(".filter").keyup((eventData) => {
  const filtroInput = eventData.target.value
  //Você também pode colocar apenas o HTML ou o SVG e modificar no append.
  const iconesDisponiveis = [
    {
      nome: "Alarme",
      iconHTML: 'bi bi-alarm'
    },
    {
      nome: "Asterisk",
      iconHTML: 'bi bi-asterisk'
    },
    {
      nome: "Bicicleta",
      iconHTML: 'bi bi-bicycle'
    },
    {
      nome: "Camera",
      iconHTML: 'bi bi-camera-fill'
    },
    {
      nome: "Relogio",
      iconHTML: 'bi bi-clock'
    }
  ]

  const result = iconesDisponiveis.filter(ico => ico.nome.toLowerCase().indexOf(filtroInput.toLowerCase()) !== -1)
//   aqui ele limpa os filhos de icones
  $("#icones").empty()
  result.map(props => {
    const { iconHTML, nome } = props
    $("#icones").append(`<i onclick="submitIcon('${nome}')" class="${iconHTML}"></i>`)
  })
})

function submitIcon(nome) {
  //Isso é só um exemplo de um evento no <i>, você pode fazer esse evento no checkbox.
  alert(`Você clicou no icon: ${nome}`)
}

CSS:

/* Isso é só um exemplo de estilo, não pensei mt nisso haha */
#icones {
  font-size: 36px;
  cursor: pointer;
}

.filter {
  margin-bottom: 15px;
}

i {
  margin: 10px;
  padding: 5px;
  background-color: red;
}

Link do codepen: https://codepen.io/ruiguilherme/pen/VwmXmPJ

Não sei se é exatamente essa a solução que você procura(talvez eu n tenha entendido direito ), mas o que eu fiz foi armazenar os icons e seus nomes no JS, fiz um filtro com base no nome dos icones, removendo todos os icones da tela, rodando no map e fazendo o append dos resultados dentro da div.

bigbossbr · 28 de fevereiro de 2021

@Rui Guilherme Olá Rui, nossa esta me ajudando muito.

Assim, montei tudo conforme você indicou, ele filtra na busca, porém quando eu limpo o campo ele não esta me retornando o icones novamente. Pelo que notei, se os valores estiverem fixos no array iconesDisponiveis funciona, mais dinâmico como fiz, ele se perde, ele limpa o array conforme vai sendo digitado. Lembrando que me array traz mais de 1000 icones, 1036 para ser exato.

//Monto o array com o icones que já tenho na pagina
function pegarIcones() {

    var array = [];
    var elemento = $(".add-icon-page");
    $.each(elemento, function (index, value) {
        var icon_name = value.id;
        var tratar = icon_name.replace("ni ni-", "");
        var icones = {
            nome: tratar,
            iconHTML: value.id,
        }
        array.push(icones);
    });
    return array;
}

$('.input-search').keyup((eventData) => {

    const filtroInput = eventData.target.value
    
    //Trago os ícones de forma dinamica
    const iconesDisponiveis = pegarIcones();

    const result = iconesDisponiveis.filter(ico => ico.nome.toLowerCase().indexOf(filtroInput.toLowerCase()) !== -1)
    //   aqui ele limpa os filhos de icones
    $(".view-icons").empty()
    result.map(props => {
        const { iconHTML, nome } = props
        
        //mesmo código que tenho na pagina com os ícones, ele filtra, mais se eu limpar o campo ele não retorna os icones
        $(".view-icons").append(`<div class="custom-control custom-control-md mb-2 fs-20px div-icon-page"><label for="${iconHTML}"><input type="radio" name="add-icon-page" class="add-icon-page" value="${iconHTML}" id="${iconHTML}" /><em id="${iconHTML}" class="select-icon ${iconHTML}"></em></label></div>`)
    })
})

bigbossbr · 28 de fevereiro de 2021

Achei o erro @Rui Guilherme,

Criei um constante fora para armazenar o arrary e somente depois chamar ele novamente dentro do filter.

Valeu pela ajuda, ainda me perco com o javascript.

Rui Guilherme · 28 de fevereiro de 2021

@bigbossbr

Muito bom ter ajudado a resolver o seu problema... O JavaScript pode ser um pouco duro às vezes. Talvez você não saiba disso. Mas o JavaScript também... kkkkk

Brincadeiras a parte, mas falando serio: eu teria que ter acesso ao HTML para poder fazer mais que isso, mas pelo o que eu pude ver aqui o problema era porque você estava chamando pegarItens() todas as vezes quando iniciava o filtro, dai ele até iria funcionar na primeira vez, mas na segunda já n iria mais porque a quantidade de icons no HTML não iria ser a mesma, por isso eu disse que o importante é manter os icons no JS e não no HTML(você vai gostar de React, ele evita esses problemas), então o ideal seria não pegar os icons do HTML como você fez:

    var elemento = $(".add-icon-page");

Pelo visto os icons estão vindo de forma estática no HTML então o ideal vai ser refatorar esse HTML e colocar todos os icons dentro de um objeto no JavaScript, depois é só rodar no map e meter um append dentro da div(exatamente da mesma forma de como eu fiz no final da função do keyup), nesse ponto em diante você vai ter os icons num objeto do JS e vai conseguir trabalhar com ele no iconesDisponiveis sem precisar pegar os icons do HTML.

Mas você já resolveu o problema, mas eu sou chato e acho que essa solução é uma gambiarra kkkkkk(não julgo quem faz gambiarra, de gambiarra eu vivo e de gambiarra vamos viver) mas para evitar bugs recomendo usar o $(document).ready(...) para não pegar icons pela matade ou até mesmo nenhum, caso esteja curioso se vai bugar recomendo usar conexão lenta e ver como fica o comportamento da interface, veja esse vídeo:

bigbossbr · 28 de fevereiro de 2021

@Rui Guilherme Cincordo contigo, deve ter ficado uma gambiarra, eu já tinha colocado tudo dentro do ready como você falou, mais também penso que dá pra mudar trazendo os ícones todos no json e depois só trabalhar eles na página, vou ajusta isto depois.

Mais hoje está assim:

Tenho uma página onde estão todos os ícones, aí no php eu dou um include no local onde quero que estes ícones apareçam, aí vem o jquery para manipular está parte da busca, mais mudando está parte que falamos, colocando os ícones todos no js, não vou nem precisar mais desta página com os ícones, já que quem vai fazer tudo isso é o já.

Vou dar uma olhada no react, estou me enrolando para estudar ele a um tempo já.

Rui Guilherme · 28 de fevereiro de 2021

@bigbossbr Nice. Mas lembra-se de fazer o teste em conexões lentas, sobre o React: Vá fundo porque React é uma maravilha, abandonei completamente coisas como Angular e HTML/CSS/JS Vanilla e até deixei o Vue com menos uso.

Minha dica de quando for aprender React é ir direto para os Hooks que é bem mais fácil de se aprender porque você não vai precisar quebrar a cabeça com o this e o código é mais limpo, depois de pegar o React já pula para NextJS para você ficar por dentro de páginas estáticas dinâmicas, SSR e de fast-loading.