Como realizar uma pesquisa e filtro em tempo real em uma tabela HTML
Estou pesquisando no Google e pesquisando o Stack Overflow há um tempo, mas simplesmente não consigo contornar esse problem
Eu tenho uma tabela HTML padrão, contendo, digamos, frutas. Igual a
<table>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
Acima, tenho uma caixa de texto que gostaria de pesquisar na tabela conforme o tipo de usuário. Então, se eles digitaremGre
por exemplo, a linha laranja da tabela desapareceria, deixando a maçã e as uvas. Se eles continuaram e digitaramGreen Gr
a linha da Apple deve desaparecer, deixando apenas uvas. Espero que isso esteja clar
E, se o usuário excluir parte ou toda a sua consulta da caixa de texto, gostaria que todas as linhas que agora correspondem à consulta reapareça
Enquanto eu sei como remover uma linha da tabela no jQuery, tenho pouca ideia de como proceder para fazer a pesquisa e remover linhas seletivamente com base nisso. Existe uma solução simples para isso? Ou um plugin?
Se alguém pudesse me apontar na direção certa, seria brilhant
Obrigado