Если правильно понял задачу, то решается она приблизительно следующим способом.
Делаем апи на любом серверном языке, скажем nodejs используя express для более удобного написания кода.
const app = express();
Делаем метод для выгрузки данных о картинках по запросу с параметром текста.
app.get(/search/:text, callback);
Берем СУБД, желательно реляционную. Скажем postgresql.
В нашей БД создаем следующие таблицы:
pictures(id serial, url text) unique_key(id)
picture_metadata(picture_id integer, metadata_name text, metadata_value text) foreign_key(picture_id, pictures.id)
Если мы построим индексы на picture_metadata.metadata_value и pictures.id, то на таблице pictures в 30к строк и скажем по 3-4 метаданных на каждую картинку, наш запрос отработает за пару миллисекунд, если не быстрее.
В нашем API берем библиотеку для работы с postgresql, и делаем запрос к нашей БД вида:
SELECT * FROM pictures p
JOIN picture_metadata pm ON p.id = pm.picture_id
WHERE pm.metadata_value like ???
Где ??? - параметр который пришел в api.
Полученные данные возвращаем из API на клиент в браузер.
В браузере код соответственно выглядит примерно так:
var apiUrl = "http://localhost/search/";
searchDiv.addEventListener('click', function() {
var value = input.value;
$.get(apiUrl + value, data => {
drawPictures(data);
})
})
Более правильного решения поставленной задачи я не вижу.
Можно конечно и без БД и апи.
Просто запихнуть эту плоскую структуру в js массивы, но тогда вас ждут проблемы. Во-первых будет медленно грузиться, т.к. помимо логики работы с данными в вашем файле будут все данные возвращаться при каждом запросе к серверу. Во-вторых сомневаюсь, что вы сможете написать столь же эффективные алгоритмы выборки данных из плоских структур чем это уже сделано в реляционных БД.