Fazer entrada de pesquisa para filtrar a lista Jquery

Question

Nov 19, 2009, 09:30 PM

Fazer entrada de pesquisa para filtrar a lista Jquery

Ei, estou tentando criar um campo de pesquisa que irá filtrar ou mostrar / ocultar (o que for melhor) os elementos da lista com base no que o usuário digitou e clicou no botão de pesquisa. Eu não tenho nenhuma idéia de como fazer isso. tudo que eu tentei não funciona infelizmente e não tenho certeza da melhor abordagem para isso, como eu uso show e hide ou há algo melhor?

Este é meu HTML:

<html>
    <head>

    </head>
    <body>
    <label for="filter">Filter</label>  
    <input type="text" name="filter" value="" id="filter" />

        <a id="addtag" href="#">Search</a> 

    <ul>
        <li id="Hero1">Superman</li>
        <li id="Hero2">Batman</li>
        <li id="Hero3">Spiderman</li>
        <li id="Hero4">Iron Man</li>
        <li id="Hero5">The Hulk</li>
    </ul>

    </body>
</html>

Então, se alguém digitar 'Superman' e clicar no botão de busca, somente o elemento da lista Superman será exibido.

Qualquer ajuda nisso seria ótimo. Obrigado.