Как выполнять поиск и фильтрацию в реальном времени в таблице HTML

Я уже некоторое время гуглил и искал Stack Overflow, но никак не могу обойти эту проблему.

У меня есть стандартная таблица HTML, содержащая, скажем, фрукты. Примерно так:

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

Над этим у меня есть текстовое поле, в котором я хотел бы искать в таблице по мере ввода пользователем. Так, если они наберут Gre , например, оранжевая строка таблицы исчезнет, ​​оставив Apple и Grapes. Если они продолжат и наберут Green Gr , ряд Apple должен исчезнуть, оставив только виноград. Надеюсь, это понятно.

И, если пользователь удалит часть или весь свой запрос из текстового поля, я бы хотел, чтобы все строки, которые теперь соответствуют запросу, снова появились.

Хотя я знаю, как удалить строку таблицы в jQuery, я мало знаю, как выполнять поиск и выборочно удалять строки на основе этого. Есть ли простое решение этой проблемы? Или плагин?

Если бы кто-нибудь мог указать мне правильное направление, это было бы замечательно.

Спасибо.