Isherath

Воспользуйтесь методами из этой статьи https://learn.javascript.ru/keyboard-events
Вам подойдет ketup. Прицепите его в вашему input. Напишите код, который будет при каждом нажатии(отпускании) кнопок клавиатуры сравнивать все набранное значения из инпута с вашими условиями и показывать определенные блоки.

Насчет консоли разработчика, там видно все, что вы можете видеть на сайте. Но можно сделать не отображение/скрытие блоков непосредственно на странице, а загрузку удаление отдельных файлов с вашими блоками. Например, использовать ajax для загрузки.

Можно написать такой функционал без тяжеловесных плагинов и т.д.
Просто почитайте https://developer.mozilla.org/ru/docs/Web/API/File... и разберитесь.
С этим функционалом можно получать превьюшки загруженных фотографий и пихать их на страницу куда угодно. Все они храняться в массиве, с которого можно удалять фотки перед отправкой на сервер.

Там, где вы получаете с сервера данные, сделайте переменную $currentPage, которая будет содержать id категории.

А на странице что-то типа такого:

<? foreach($categories as $category) : ?>
<? if ($currentPage == $category->id) : ?>
<a href="/cat/<?= $category->id ?>" class="currentPageClass"><?= e($category->name) ?></a>
<? else : ?>
<a href="/cat/<?= $category->id ?>"><?= e($category->name) ?></a>
<? endif; ?>
<? endforeach; ?>

И добавить в CSS стили для класса currentPageClass