Смотрите, в приведенном выше коде вы на каждое нажатие кнопки делаете два действия:
- запрос на получение json-файла,
- вычисляете, какие элементы нужно отрисовать в списке.
1. Предполагаю, что cargo.json не изменяется в момент ввода текста в поисковой строке, верно? А значит нет смысла читать его каждый раз по сети. Т.е. вы можете
один раз запросить его содержимое, и затем результат сохранить в памяти (в переменной). Соответственно элементы рендерить, фильтруя этот результат.
2. Никому никогда не надо искать что-то из 1-2 символов. Поэтому обычно вводят
минимальную длину поисковой фразы, начиная с которой производят поиск. К примеру это может быть 3 символа. Т.е. лишь вводя в поле 3 символа и больше, пользователь будет запускать поиск.
3. Люди набирают текст с разной скоростью. Кому-то, чтобы ввести в поиске слово "товар", нужно 10 секунд, а кто-то справится за 1 секунду... И во втором случае совершенно не нужно 5 раз (на каждый символ) выполнять описанные действия. Поэтому, если между нажатиями проходит "слишком мало времени", предыдущим можно пренебречь. Это т.н.
время задержки. Как правило, достаточно 300-500 мс.
4. Конечно, в интернет-магазинах товары хранятся не в статических файлах (как в примере), а в базах данных. Представляете, если в магазине миллиард товаров, и все будут храниться в огромном json-файле. В вашей реализации нужно будет этот скажем 10Мб файл читать и потом по этому миллиарду строк еще и фильтровать. Поэтому
механизм поиска всегда реализуется средствами бекенда. В итоге на конкретный эндпоинт отправляется строка поиска, а в ответе приходят результаты, которые вы рендерите.
PS. Я намеренно не написал тут ни строчки кода, ведь это учебный проект, а значит вы самостоятельно должны эти моменты (1-3) реализовать. Если что, можете посмотреть исходники готовых решений, они тоже будут реализовывать описанное выше:
https://github.com/search?l=JavaScript&q=autocompl... 
