Поиск Algolia

С помощью этого действия можно запустить поиск Algolia Search. Это поможет пользователям искать документы, присутствующие в коллекции Firestore, задавая поисковый запрос.

На этой странице вы узнаете, как определить действие Algolia Search Action во FlutterFlow.

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

• Правильно настроенная учетная запись Algolia.
• Наличие хотя бы одной коллекции Firestore Collection, подключенной к учетной записи Algolia.
• Завершенная конфигурация Algolia на FlutterFlow.

Если вы не выполнили эти шаги, пожалуйста, следуйте инструкциям, представленным на следующей странице, прежде чем продолжить:

Вам нужен текст, который будет предоставлен в качестве поискового термина при запуске поискового запроса. Обычно этот термин вводится пользователем. Базовый пользовательский интерфейс поиска содержит текстовое поле (TextField) и виджет поисковой кнопки (IconButton).

Выполните следующие шаги, чтобы определить пользовательский интерфейс поиска:

1. Перетащите виджет TextField из панели виджетов и поместите его на холст.
2. Вы можете настроить свойства TextField в соответствии со стилем оформления вашего приложения.
3. Теперь перетащите виджет IconButton и поместите его на холст. Вы можете использовать виджет Row, чтобы разместить текстовое поле и кнопку IconButton в одном ряду. В некоторых случаях их можно добавить и внутрь AppBar (смотрите демонстрацию ниже).
4. Измените значок виджета IconButton на значок поиска и настройте его при необходимости.

На этом построение простого пользовательского интерфейса поиска завершено. Перейдите к следующему шагу, чтобы определить действие поиска.

Выполните следующие шаги, чтобы определить действие поиска Algolia:

1. Выберите виджет (например, IconButton), для которого вы хотите определить действие.
2. Выберите Действия на панели свойств (правое меню).
3. Нажмите кнопку + Добавить действие.
4. Выберите жест из выпадающего списка: «По касанию», «По двойному касанию» или «По длительному нажатию».
5. Выберите тип действия Algolia Search.
6. Выберите коллекцию Firebase, по которой будет выполняться поиск.
7. Теперь вам нужно определить, откуда брать поисковый запрос. Вы можете выбрать Specific Value или From Variable. Если вы хотите использовать значение TextField в качестве поискового термина, вам следует выбратьFromVariable.
8. Если вы выбрали Specific Value, определите термин внутри поля.
9. Если вы выбрали From Variable, выберите Source из выпадающего меню, а затем выберите вариант из Available Options. Например, если вы хотите использовать значение текстового поля TextField, выберите Source как Widget State и выберите имя поля в Available Options.
10. Наконец, вы можете задать количество максимальных результатов поиска в разделе Max Results.

После определения действия поиска необходимо отобразить результаты в пользовательском интерфейсе.

Выполните следующие действия, чтобы отобразить результаты поиска в вашем приложении:

1. Перетащите виджет ListView на холст. Создайте виджет внутри ListView для отображения каждого из результатов поиска.
2. Выберите виджет ListView, нажмите на Generate Dynamic Children на панели свойств (правое меню).
3. Введите имя переменной, чтобы на результаты поиска Algolia можно было ссылаться при отображении их внутри виджетов или при передаче на другую страницу приложения.
4. Выберите Source в качестве имени переменной результатов, в которой хранятся данные поиска Algolia.
5. Нажмите кнопку Сохранить. Затем нажмите Ok в появившемся диалоговом окне.
6. Правильно установите данные Algolia Search для каждого из виджетов, в которых вы хотите отображать эти данные.
   Например, если вы хотите отобразить данные в виджете Text, выберите виджет, нажмите Set from Variable, выберите Source в качестве имени переменной, где хранятся все данные поиска Algolia (в шаге 3), выберите имя поля из выпадающего списка Available Options, данные которого вы хотите отобразить, нажмите Save.

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

Для определения параметра выполните следующие действия:

1. Перейдите на страницу, на которую вы хотите передать данные.
2. Нажмите кнопку Определить параметры, расположенную в верхней части панели свойств.
3. Нажмите + Добавить параметр.
4. Введите имя параметра.
5. Выберите Тип как Ссылка на запись.
6. Выберите Тип записи из выпадающего меню.
7. Нажмите кнопку Сохранить.

Выполните следующие шаги, чтобы передать каждый результат поиска на другую страницу:

1. Выберите виджет, присутствующий внутри ListView, к которому вы хотите применить действие Navigate Action.
2. Выберите Действия на панели свойств (правое меню).
3. Нажмите кнопку + Добавить действие.
4. Выберите жест из выпадающего списка: «По касанию», «По двойному касанию» или «По длительному нажатию».
5. Выберите Тип действия как Переход.
6. Выберите Тип навигации как Переход на страницу, выберите страницу в разделе Переход на страницу.
7. Нажмите + Передать в параметре.
8. Выберите имя параметра в раскрывающемся списке.
9. Выберите Источник как переменную результата поиска Algolia и выберите ссылку в разделе Доступные параметры.

Вы можете просмотреть код, который генерируется FlutterFlow в фоновом режиме, перейдя в меню Developer Menu > View Code на панели инструментов.

Сгенерированный код для Algolia Search Action выглядит следующим образом:

В приведенном выше коде метод search() используется на объекте Firestore Collection для запуска действия поиска. Условие поиска задается из текстового поля с помощью textController.text, а максимальное количество возвращаемых результатов установлено на 20.

Как только результаты поиска успешно получены, они устанавливаются в переменную algoliaSearchResult, и, наконец, вызывается функция setState() для обновления страницы.

• FlutterFlow использует пакет algolia для доступа к поисковым API Algolia.
• Хотите узнать, как можно использовать несколько действий? Посмотрите эту страницу.
• Шаблон приложения FlutterFlow с использованием действия Algolia Search: Суды.