Поиск с автозавершением в адаптивных карточках
Функции поиска typeahead в адаптивных карточках предоставляют расширенные возможности поиска в компоненте Input.ChoiceSet
. Он предоставляет список вариантов ввода текста в поле поиска. Вы можете включить поиск typeahead с адаптивными карточками для поиска и выбора данных.
Поиск typeahead можно использовать для следующих поисковых запросов:
Статический поиск typeahead
Статический поиск typeahead позволяет пользователям выполнять поиск по значениям, указанным Input.ChoiceSet
в полезных данных адаптивной карточки. Статический поиск typeahead можно использовать для отображения пользователю нескольких вариантов выбора. Размер полезных данных в статическом поиске увеличивается с количеством вариантов, указанных в полезных данных.
Когда пользователь начинает вводить тексты, выбор отфильтровываются, которые частично соответствуют входным данным. В раскрывающемся списке выделены входные символы, соответствующие поиску.
На следующем рисунке показан статический поиск typeahead:
Динамический поиск typeahead
Динамический поиск typeahead полезен для поиска и выбора данных из больших наборов данных. Наборы данных загружаются динамически из набора данных, указанного в полезных данных карточки. Функция typeahead помогает отфильтровать выбранные варианты по типу пользователя.
Примечание.
Вы не можете получить расширенные возможности для работы с карточками с динамическим поиском, например расширениями сообщений на основе запросов.
Реализация поиска typeahead
Input.ChoiceSet
является одним из важных входных компонентов адаптивных карточек. Элемент управления typeahead search можно добавить в Input.ChoiceSet
компонент для реализации поиска typeahead. Вы можете выполнить поиск и выбор необходимых сведений с помощью следующих вариантов:
- Раскрывающийся список, например развернутый выбор.
- Переключатель, например одно выделение.
- Флажки, например несколько вариантов выбора.
Примечание.
- Элемент
Input.ChoiceSet
управления основан на стиле иisMultiSelect
свойствах. - Чтобы использовать динамический поиск typeahead в групповом чате, пользователь должен добавить
groupchat
область в область установки бота в манифесте приложения и установить ее в этом групповом чате. - Количество параметров в раскрывающемся списке ограничено 15.
Свойства схемы
Следующие свойства являются новыми дополнениями к схеме Input.ChoiceSet
для включения поиска typeahead:
Свойство | Тип | Обязательный | Описание |
---|---|---|---|
style | Compact Развернуто Отфильтрованный |
Нет | Добавляет отфильтрованный стиль в список поддерживаемых проверок для статического типа. |
choices.data | Data.Query | Нет | Включает динамическую typeahead в качестве типов пользователей путем получения удаленного набора вариантов из серверной части. |
значение | String | Нет | Начальный выбор (или набор вариантов), который необходимо выбрать. Для множественного выбора укажите строку значений, разделенную запятыми. |
Определение Data.Query
Свойство | Тип | Обязательный | Описание |
---|---|---|---|
type | Data.Query | Да | Указывает, что это объект Data.Query. |
набор данных | String | Да | Указывает тип данных, которые извлекаются динамически. |
значение | String | Нет | Заполняет запрос на вызов к боту входными данными, которые пользователь предоставил для ChoiceSet . |
count | Номер | Нет | Заполняет запрос на вызов к боту, чтобы указать количество элементов, которые должны быть возвращены. Бот игнорирует его, если пользователи хотят отправить другую сумму. |
skip | Номер | Нет | Заполняет запрос на вызов к боту, чтобы указать, что пользователи хотят разбиение на страницы и двигаться вперед в списке. |
Пример
Пример полезных данных, который содержит статический и динамический поиск typeahead с одним и несколькими параметрами выбора, как показано ниже.
{
"type": "AdaptiveCard",
"body": [
{
"columns": [
{
"width": "1",
"items": [
{
"size": null,
"url": "https://urlp.asm.skype.com/v1/url/content?url=https%3a%2f%2fi.imgur.com%2fhdOYxT8.png",
"height": "auto",
"type": "Image"
}
],
"type": "Column"
},
{
"width": "2",
"items": [
{
"size": "extraLarge",
"text": "Game Purchase",
"weight": "bolder",
"wrap": true,
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"text": "Please fill out the below form to send a game purchase request.",
"wrap": true,
"type": "TextBlock"
},
{
"columns": [
{
"width": "auto",
"items": [
{
"text": "Game: ",
"wrap": true,
"height": "stretch",
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"columns": [
{
"width": "stretch",
"items": [
{
"choices": [
{
"title": "Call of Duty",
"value": "call_of_duty"
},
{
"title": "Death's Door",
"value": "deaths_door"
},
{
"title": "Grand Theft Auto V",
"value": "grand_theft"
},
{
"title": "Minecraft",
"value": "minecraft"
}
],
"style": "filtered",
"placeholder": "Search for a game",
"id": "choiceGameSingle",
"type": "Input.ChoiceSet"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"columns": [
{
"width": "auto",
"items": [
{
"text": "Multi-Game: ",
"wrap": true,
"height": "stretch",
"type": "TextBlock"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"columns": [
{
"width": "stretch",
"items": [
{
"choices": [
{
"title": "Static Option 1",
"value": "static_option_1"
},
{
"title": "Static Option 2",
"value": "static_option_2"
},
{
"title": "Static Option 3",
"value": "static_option_3"
}
],
"value": "Static_option_2",
"isMultiSelect": true,
"style": "filtered",
"choices.data": {
"type": "Data.Query",
"dataset": "xbox"
},
"id": "choiceGameMulti",
"type": "Input.ChoiceSet"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"columns": [
{
"width": "auto",
"items": [
{
"text": "Needed by: ",
"wrap": true,
"height": "stretch",
"type": "TextBlock"
}
],
"type": "Column"
},
{
"width": "stretch",
"items": [
{
"id": "choiceDate",
"type": "Input.Date"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
},
{
"text": "Buy and download digital games and content directly from your Xbox console, Windows 10 PC, or at Xbox.com.",
"wrap": true,
"type": "TextBlock"
},
{
"text": "Earn points for what you already do on Xbox, then redeem your points on real rewards. Play more, get rewarded. Start earning today.",
"wrap": true,
"type": "TextBlock"
}
],
"actions": [
{
"data": {
"msteams": {
"type": "invoke",
"value": {
"type": "task/submit"
}
}
},
"title": "Request Purchase",
"type": "Action.Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2"
}
Фрагменты кода для вызова запроса и ответа
Вызов запроса
{
"name": "application/search",
"type": "invoke",
"value": {
"queryText": "fluentui",
"queryOptions": {
"skip": 0,
"top": 15
},
"dataset": "npm"
},
"locale": "en-US",
"localTimezone": "America/Los_Angeles",
// …. other fields
}
Отклик
protected override async Task<InvokeResponse> OnInvokeActivityAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
{
if (turnContext.Activity.Name == "application/search")
{
var packages = new[] {
new { title = "A very extensive set of extension methods", value = "FluentAssertions" },
new { title = "Fluent UI Library", value = "FluentUI" }};
var searchResponseData = new
{
type = "application/vnd.microsoft.search.searchResponse",
value = new
{
results = packages
}
};
var jsonString = JsonConvert.SerializeObject(searchResponseData);
JObject jsonData = JObject.Parse(jsonString);
return new InvokeResponse()
{
Status = 200,
Body = jsonData
};
}
return null;
}
Пример кода
Название примера | Описание | .NET | Node.js | Манифест |
---|---|---|---|---|
Элемент управления "Поиск typeahead" на адаптивных карточках | В примере показано, как использовать статический и динамический элемент управления поиском typeahead в адаптивных карточках. | Просмотр | Просмотр | Просмотр |
См. также
Platform Docs