Javascript Sistema de busca em tabela com js puro.

[Diogou]

Oi, tenho um código de procura em tabela em tempo real, basicamente ele cria tr, e depois no input é filtrado.

 

Podem ver o código aqui:

http://jsfiddle.net/19scgzox

 

porém, o que eu quero fazer é um tipo de de "catalogo" de uma loja virtual.

Logo no começo do script tem:

var tbody = document.getElementById("tbody");
            var dados = [
                ["Tênis"],
                ["Mochila"],
                ["Blusa"],
                ["Bolsa"]
                
            ];

Se eu coloco, no lugar de um texto, por exemplo, eu coloco um ["<a href=#>Tênis</a>], todo o codigo para de funcionar (podem ver o erro no console).

Como eu resolvo este problema?

[makotsunami]

@showme No seu exemplo está faltando uma aspa. De qualquer forma, acho que não seja esse o problema.

 

Troquei o tênis por uma tag anchor e funcionou aqui... Da uma olhada e veja se você usou as aspas de maneira certa.

 

var tbody = document.getElementById("tbody");

var dados = [
  ["<a target='_blank' href='http://www.google.com'>Tênis</a>"],
  ["Mochila"],
  ["Blusa"],
  ["Bolsa"]
];

 

Dica: troque o GetelementById por QuerySelector, com isso você n precisa encher seu código de ID.

[Diogou]

@makotsunami

 

Eu resolvi, tava até fazendo aqui pra ajudar a galera:

 

na linha 66:

for (var j = 0; j < td.length; j++){

É só colocar "1" no lugar do 0, depois na variável "dados", fica [ ["<codigo>", "camisa"], ["<codigo>", "blusa"]];

Ou seja, o input não vai ler o primeiro e não vai aparecer na pesquisa, vai ler a partir do 1. [0,1,2...];

 

Da pra colocar quantos textos quiser, mas na linha 53 tem que adicionar na var tr

"<td style='width: 30%;'>" + dados[i][0] + "</td>" +

e trocar o valor [0], pelo numero da pesquisa, no caso do exemplo acima, eu coloquei o código na posição [0] e os filtros de pesquisa do [1] pra frente, no caso ficaria:

"<td style='width: 30%;'>" + dados[i][0] + "</td>" + //Esse é o que o input não lê
"<td style='width: 30%; display: none;'>" + dados[i][1] + "</td>" + //a partir daqui o input lê

 

Não sei se ficou muito claro, mas tem aqui um exemplo funcionando:

https://jsfiddle.net/19scgzox/50/

 

ja estou fazendo sistema de fitro lateral pra essa busca, ai você faz div do jeito que quiser.