Cómo realizar una búsqueda y filtro en tiempo real en una tabla HTML

He estado buscando en Google y buscando Stack Overflow durante un tiempo, pero no puedo solucionar este problema.

Tengo una tabla HTML estándar que contiene, por ejemplo, fruta. Al igual que

<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>

Por encima de esto, tengo un cuadro de texto, que me gustaría buscar en la tabla a medida que un usuario escribe. Entonces, si escribenGre por ejemplo, la fila naranja de la tabla desaparecería, dejando Apple y Grapes. Si continuaron y escribieronGreen Gr la fila de Apple debería desaparecer, dejando solo uvas. Espero que esto esté claro.

Y, si el usuario elimina parte o la totalidad de su consulta del cuadro de texto, me gustaría que reaparezcan todas las filas que ahora coinciden con la consulta.

Mientras sé cómo eliminar una fila de la tabla en jQuery, tengo poca idea sobre cómo hacer la búsqueda y eliminar filas selectivamente en función de esto. ¿Hay una solución simple para esto? ¿O un complemento?

Si alguien pudiera señalarme en la dirección correcta, sería genial.

Gracias

Respuestas a la pregunta(16)

Su respuesta a la pregunta