Реализация текстового поиска с использованием массивов и отложенной загрузки.

Начиная с версии 5.8.0 (javascript), Firestore не поддерживает полнотекстовый поиск. Как указано в их документации, мы можем подписаться на сторонних поставщиков, которыми являются Agolia или Elastic Search для полнотекстового поиска. Однако это замечательно для некоторых из нас, кто не хочет пользоваться этими услугами, поскольку они дорогие, не желает поддерживать другую службу только для этой функции или по какой-либо другой причине. Эта история продемонстрирует, как можно использовать запрос array-contains для фильтрации записей и добавления отложенной загрузки для разбиения на страницы.

Я предполагаю, что вы уже знакомы с тем, как настроить проект Firebase, иначе обратитесь к их документации.

Создание приложения

Давайте создадим простое приложение, в котором есть записи о людях, и мы сможем отфильтровать людей, которых ищем. Этот тип приложений применяется к картам пациентов, платежной ведомости и т. Д., В которых наши пользователи ищут кого-то, выполняя поиск по его имени.

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

Создание записей

Давайте сгенерируем 200 случайных имен с помощью таких инструментов, как Mackaroo. У него должны быть свойства: имя (объект) и ключевые слова (массив). Поле ключевые слова будет заполнено строками со всеми возможными вариантами поиска по имени. Обратите внимание, что array-contains чувствительно к регистру, было бы намного лучше, чтобы наши имена были отформатированы в нижнем регистре. Давайте создадим функцию, которая будет генерировать эти ключевые слова.

Вызов generateKeywords ([‘john’, ‘the’, ‘dough’, ‘jr’]) приведет к следующему результату:

Это много строк. Мы передаем этот массив в свойство keywords. В реальных приложениях это делается при создании или обновлении записи о человеке.

Включена пустая строка, поэтому при запросе коллекции люди с полем ключевые слова мы должны ожидать получить все записи, а не ничего.

Вернемся к нашим 200 случайным именам JSON. Мы выполним итерацию по каждому из них и добавим свойство keywords со значением, полученным с помощью функции generateKeywords. Затем добавьте документ из коллекции людей в Firestore.

После запуска этого скрипта наша коллекция должна выглядеть примерно так:

Реализация поиска

Внутри обработчика событий DOMContentLoaded позволяет создать функцию, которая принимает поиск в качестве аргумента, который извлекает эти документы из коллекции людей и возвращает разметку, которая будет передана позже телу.

Вызовите searchByName с пустой строкой, чтобы отобразить всех людей.

Запустите приложение, и вы должны увидеть в консоли сообщение об ошибке:

Щелкните эту ссылку, чтобы создать индекс, дождитесь его завершения, а затем снова запустите или обновите приложение. Вы должны увидеть что-то вроде этого:

В этом и заключается цель пустой строки, которую мы добавили в функцию generateKeywords, потому что по умолчанию наше приложение должно отображать всех людей при передаче пустой строкой в ​​функции searchByName.

Когда мы вводим текст в поле поиска, таблица не фильтруется. Мы должны прикрепить обработчик события keyup к текстовому полю.

Попробуйте выполнить поиск по фамилии, имени или имени сначала.

Теперь мы реализовали текстовый поиск через array-contains. Наша работа здесь сделана, если мы будем рады вернуть все записи вашим пользователям.

Что, если у нас есть тысячи записей? 🤔
И мы находимся на Плане Spark, по которому в день читается всего 50 000 документов. 😅
Тогда сотни пользователей заходят на эту страницу. 😨

Еще хуже, если мы используем План Blaze с тысячами записей, к которым имеют доступ сотни пользователей. Пик платежа 😱💸💸💸😭

Мы не хотим, чтобы все закончилось вот так.

Предел спешит на помощь

Мы будем использовать .limit (). Давайте обновим нашу функцию searchByName.

Мы изменили параметр со строки на объект со свойствами search и limit со значениями по умолчанию .

Мы также должны изменить способ вызова нашей функции.

Обновите свое приложение, и вы увидите только первых 50 человек. Когда вы вводите текст в поле поиска, оно фильтруется и по-прежнему отображает только первых 50 человек.

Но как насчет тех людей после первых 50? 🤔

Включить отложенную загрузку

Мы реализуем функцию бесконечной прокрутки, за исключением того, что у нас есть конечное количество записей. Это должно было называться конечной прокруткой. 😅

Сначала мы должны знать, когда вертикальная полоса прокрутки находится внизу.

Когда вертикальная полоса прокрутки достигает нижней части страницы, мы должны получить фамилию последнего человека. Замените комментарий «сделать что-нибудь» следующим:

Нам нужна фамилия последнего человека для курсора запроса, как Firestore реализует разбиение на страницы. Это дает возможность установить отправную точку для поиска документов. Давайте воспользуемся методом startAfter. В нашем запросе .orderBy (‘name.last’) цепочка другого метода .startAfter (lastNameOfLastPerson)

А также добавьте к параметру еще одно свойство lastNameOfLastPerson.

Теперь функции searchByName будут возвращать записи в зависимости от фамилии последнего человека.

Давайте передадим эту фамилию последнего человека в функцию searchByName, а затем обновим существующие строки таблицы. Синтаксис бесконечной прокрутки должен выглядеть так:

Давай попробуем. 😁

Вот и все. Это приложение размещено здесь.
Ссылка на исходный код.
Если у вас есть аллергия на синтаксис .innerHTML, я создал еще одну ветку без использования Это.

Спасибо, что прочитали мой первый рассказ. Рад слышать ваши отзывы. 😇