Hacer entrada de búsqueda para filtrar a través de la lista Jquery

Question

Nov 19, 2009, 09:30 PM

Hacer entrada de búsqueda para filtrar a través de la lista Jquery

Hola, estoy tratando de crear un campo de búsqueda que filtre o muestre / oculte (lo que sea mejor) los elementos de la lista según lo que el usuario escribió y presionó el botón de búsqueda. No tengo ni idea de cómo hacer esto. todo lo que probé no funciona, lamentablemente, y no estoy seguro de cuál es el mejor enfoque para esto, ¿cómo uso mostrar y ocultar o hay algo mejor?

Este es mi 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>

Por lo tanto, si alguien escribe 'Superman' y hace clic en el botón de búsqueda, solo se mostrará el elemento de la lista de Superman.

Cualquier ayuda con esto sería genial. Gracias.