Поиск с автозавершением в адаптивных карточках

  • Статья

Функции поиска typeahead в адаптивных карточках предоставляют расширенные возможности поиска в компоненте Input.ChoiceSet . Он предоставляет список вариантов ввода текста в поле поиска. Вы можете включить поиск typeahead с адаптивными карточками для поиска и выбора данных.

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

Статический поиск typeahead позволяет пользователям выполнять поиск по значениям, указанным Input.ChoiceSet в полезных данных адаптивной карточки. Статический поиск typeahead можно использовать для отображения пользователю нескольких вариантов выбора. Размер полезных данных в статическом поиске увеличивается с количеством вариантов, указанных в полезных данных. Когда пользователь начинает вводить тексты, выбор отфильтровываются, которые частично соответствуют входным данным. В раскрывающемся списке выделены входные символы, соответствующие поиску.

На следующем рисунке показан статический поиск typeahead:

Графическое представление демонстрирует статический поиск typehead.

Динамический поиск typeahead полезен для поиска и выбора данных из больших наборов данных. Наборы данных загружаются динамически из набора данных, указанного в полезных данных карта. Функция typeahead помогает отфильтровать выбранные варианты по типу пользователя.

Динамический поиск typeahead

Динамический поиск typeahead 2

Примечание.

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

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 в адаптивных карточках. Просмотр Просмотр Просмотр

См. также