Vorausschauende Suche in Adaptiven Karten
Die Suchfunktion "Typeahead" in Adaptive Karten bietet eine verbesserte Suchfunktion für Input.ChoiceSet
Komponenten. Es enthält eine Liste der Optionen zum Eingeben von Text in das Suchfeld. Sie können die Typeahead-Suche mit adaptiven Karten integrieren, um Daten zu durchsuchen und auszuwählen.
Sie können die typeahead-Suche für die folgenden Suchvorgänge verwenden:
Statische Typeahead-Suche
Mit der statischen Typahead-Suche können Benutzer aus Werten suchen, die in Input.ChoiceSet
der Nutzlast der adaptiven Karte angegeben sind. Die statische Typaheadsuche kann verwendet werden, um dem Benutzer mehrere Optionen anzuzeigen. Die Nutzlastgröße in der statischen Suche nimmt mit der Anzahl der in der Nutzlast angegebenen Auswahlmöglichkeiten zu.
Wenn der Benutzer mit der Eingabe der Texte beginnt, werden die Auswahlmöglichkeiten gefiltert, die teilweise mit der Eingabe übereinstimmen. Die Dropdownliste hebt die Eingabezeichen hervor, die der Suche entsprechen.
Die folgende Abbildung zeigt die statische Typaheadsuche:
Dynamische Typeahead-Suche
Die dynamische Typahead-Suche ist nützlich, um Daten aus großen Datasets zu durchsuchen und auszuwählen. Die Datasets werden dynamisch aus dem dataset geladen, das in der Kartennutzlast angegeben ist. Die typeahead-Funktion hilft beim Herausfiltern der Auswahl, während der Benutzer eingibt.
Hinweis
Mit dynamischer Suche, z. B. abfragebasierten Nachrichtenerweiterungen, können Sie keine umfassenden Kartenfunktionen erhalten.
Implementieren der typeahead-Suche
Input.ChoiceSet
ist eine der wichtigen Eingabekomponenten in adaptiven Karten. Sie können der Komponente ein Typeahead-Suchsteuerelement hinzufügen, Input.ChoiceSet
um die Typeahead-Suche zu implementieren. Sie können die erforderlichen Informationen mit der folgenden Auswahl suchen und auswählen:
- Dropdownliste, z. B. erweiterte Auswahl.
- Optionsfeld, z. B. Einzelauswahl.
- Kontrollkästchen, z. B. Mehrfachauswahl.
Hinweis
- Das
Input.ChoiceSet
Steuerelement basiert auf dem Stil undisMultiSelect
den Eigenschaften. - Um die dynamische Typaheadsuche im Gruppenchat verwenden zu können, muss der Benutzer dem Bereich für die Botinstallation im App-Manifest bereich hinzufügen
groupchat
und ihn in diesem bestimmten Gruppenchat installieren. - Die Anzahl der Optionen in der Dropdownliste ist auf 15 beschränkt.
Schemaeigenschaften
Die folgenden Eigenschaften sind die neuen Ergänzungen des Schemas, um die Input.ChoiceSet
Typaheadsuche zu aktivieren:
Eigenschaft | Typ | Erforderlich | Beschreibung |
---|---|---|---|
style | Compact Erweitert Filtered |
Nein | Fügt der Liste der unterstützten Überprüfungen für statische Typahead eine gefilterte Formatvorlage hinzu. |
choices.data | Data.Query | Nein | Aktiviert dynamische Typahead während der Benutzertypen, indem eine Remoteauswahl aus einem Back-End abgerufen wird. |
Wert | Zeichenfolge | Nein | Die anfängliche Auswahl (oder gruppe von Auswahlmöglichkeiten), die ausgewählt werden muss. Geben Sie für mehrfache Auswahl eine durch Trennzeichen getrennte Zeichenfolge mit Werten an. |
Data.Query-Definition
Eigenschaft | Typ | Erforderlich | Beschreibung |
---|---|---|---|
type | Data.Query | Ja | Gibt an, dass es sich um ein Data.Query-Objekt handelt. |
Dataset | Zeichenfolge | Ja | Gibt den Datentyp an, der dynamisch abgerufen wird. |
Wert | Zeichenfolge | Nein | Füllt die Aufrufanforderung an den Bot mit der Eingabe auf, die der Benutzer für bereitgestellt hat ChoiceSet . |
count | Zahl | Nein | Füllt für die Aufrufanforderung an den Bot auf, um die Anzahl der Elemente anzugeben, die zurückgegeben werden müssen. Der Bot ignoriert sie, wenn die Benutzer eine andere Menge senden möchten. |
skip | Zahl | Nein | Füllt die Aufrufanforderung an den Bot auf, um anzugeben, dass Benutzer paginieren und in der Liste fortfahren möchten. |
Beispiel
Die Beispielnutzlast, die statische und dynamische Typaheadsuche mit Einzel- und Mehrfachauswahloptionen wie folgt enthält:
{
"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"
}
Codeausschnitte zum Aufrufen von Anforderung und Antwort
Anforderung aufrufen
{
"name": "application/search",
"type": "invoke",
"value": {
"queryText": "fluentui",
"queryOptions": {
"skip": 0,
"top": 15
},
"dataset": "npm"
},
"locale": "en-US",
"localTimezone": "America/Los_Angeles",
// …. other fields
}
Antwort
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;
}
Codebeispiel
Beispielname | Beschreibung | .NET | Node.js | Manifest |
---|---|---|---|---|
Typeahead-Suchsteuerelement auf adaptiven Karten | Das Beispiel zeigt, wie Sie das statische und dynamische Suchsteuerelement für Typaheads in adaptiven Karten verwenden. | View | View | Anzeigen |