Schnellstart: Hinzufügen von Suchfunktionen zu einer App (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Die meisten Benutzer verwenden die Suchfunktion, wenn sie etwas suchen. Wenn mit der App beispielsweise Mediendateien wiedergegeben werden, erwarten Benutzer, dass sie nach einem bestimmten Song oder Video suchen können. Bei einer Koch-App wird erwartet, dass nach bestimmten Rezepten oder Zutaten gesucht werden kann.
Mit etwas Planung ist es nicht schwierig, der App die Suchfunktion hinzuzufügen. Sie benötigen Folgendes:
- Eine zu durchsuchende Datenquelle: Sie benötigen einen Katalog oder Bestand von Elementen, nach denen Benutzer suchen können. Je aussagekräftiger Sie diesen Bestand gestalten, desto bessere Suchergebnisse ergeben sich.
- Ein Steuerelement zur Eingabe von Suchabfragen: Windows verfügt über ein SearchBox-Steuerelement, das von der App verwendet werden kann. Das SearchBox-Steuerelement bietet einen Eingabebereich zum Eingeben von Abfragen, eine Suchschaltfläche zum Ausführen der Suche und Ereignisse zum Behandeln von Suchabfragen. Außerdem werden automatisch einige Suchvorschläge bereitgestellt.
- Eine Seite zum Anzeigen von Suchergebnissen. Unter Microsoft Visual Studio wird die Vorlage Suchergebnisseite bereitgestellt, mit der sich ein Großteil des Codes erstellen lässt, den Sie zum Behandeln von Suchabfragen und Anzeigen von Ergebnissen benötigen.
In dieser Schnellstartanleitung erfahren Sie, wie Sie diese Elemente verwenden, um der App Suchfunktionen hinzuzufügen.
In unserer Serie App-Features von A bis Z können Sie dieses Feature in Aktion sehen.: Windows Store-App-Benutzeroberfläche von A bis Z
Voraussetzungen
- Es wird davon ausgegangen, dass Sie einer einfachen Windows Store-App mit JavaScript Steuerelemente hinzufügen können. Anweisungen zum Hinzufügen von Steuerelementen finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen und Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
- Sie sollten mit der Verwendung von Datenquellen und mit der Datenbindung vertraut sein. Anweisungen finden Sie unter So wird's gemacht: Anpassen von Visual Studio-Vorlagendaten.
Einrichten der Daten
Wenn Benutzer eine Suchabfrage eingeben, sucht die App nach Elementen, die für Benutzer ggf. interessant sind. Die von der App durchsuchten Daten können unterschiedlicher Art sein: eine XML-Datei, JavaScript Object Notation (JSON)-Daten, eine Datenbank, ein Webdienst oder Dateien im Dateisystem.
In den Beispielen dieser Schnellstartanleitung werden die Beispieldaten verwendet, die beim Erstellen eines neuen Projekts in Microsoft Visual Studio generiert werden.
Wenn Sie mit Visual Studio eine neue Raster-App, Hub-App oder Split App erstellen, wird im js-Ordner der App eine Datei mit dem Namen data.js erstellt. Diese Datei enthält statische Daten, die Sie durch Ihre eigenen Daten ersetzen können. Wenn die App zum Beispiel RSS- oder JSON-Daten über eine einzelne xhr-Anforderung abruft, können Sie diesen Code zu data.js hinzufügen. Wenn Sie den Code an dieser Stelle einfügen, können Sie problemlos eigene Daten verwenden, ohne das von der Suchergebnisseite verwendete Datenmodell ändern zu müssen.
Hier ist ein Beispiel für die Beispieldaten:
function generateSampleData() {
// . . .
var sampleGroups = [
{ key: "group1", title: "Group Title: 1", // . . .
// . . .
];
var sampleItems = [
{ group: sampleGroups[0], title: "Item Title: 1", // . . .
// . . .
];
return sampleItems;
}
Damit Ihre Dateien auf diese Daten zugreifen können, definiert die Datei data.js einen Data-Namespace, der diese Member verfügbar macht:
items: Eine WinJS.Binding.List, die die Datenelemente enthält. Dies ist eine gruppierte List.groups: Eine WinJS.Binding.List, mit den Gruppen, zu denen die Datenelemente gehören. (Sie können die Gruppen auch abrufen, indem Sie items.groups aufrufen.)- "getItemReference": Ruft ein Objekt ab, das den Gruppenschlüssel und den Titel des angegebenen Elements enthält.
- "getItemsFromGroup": Ruft eine FilteredListProjection ab, die die Elemente enthält, die zu der Gruppe mit dem angegebenen Schlüssel gehören.
- "resolveGroupReference": Ruft ein Objekt ab, das die Gruppe mit dem angegebenen Schlüssel darstellt.
- "resolveItemReference": Diese Methode akzeptiert ein Array mit zwei Zeichenfolgen, einem Gruppenschlüssel und einem Titel. Diese Methode ruft das Element ab, das den angegebenen Gruppenschlüssel und den angegebenen Titel enthält.
Sie müssen Ihre Daten nicht in diesen Namespace oder diese Member einfügen, aber Sie können sich dadurch die Verwendung der Vorlage Suchergebnisseite erleichtern.
(Weitere Informationen zum Arbeiten mit den von der Vorlage generierten Daten finden Sie unter So wird's gemacht: Anpassen von Visual Studio-Vorlagendaten.)
Hinzufügen einer Suchergebnisseite
Auf der Suchergebnisseite werden Suchabfragen verarbeitet und die Ergebnisse angezeigt. Wir fügen Ihrem Projekt nun solch eine Seite hinzu. (In diesen Anweisungen wird angenommen, dass Ihr Projekt anhand der Vorlage "Hub-App", "Raster-App" oder "Split App" erstellt wurde. )
.gif "Hh465238.wedge(de-de,WIN.10).gif")
Hinzufügen des Elements "Suchergebnisseite"
Fügen Sie im Projektmappen-Explorer dem Projektordner pages einen neuen Ordner namens search hinzu.
Öffnen Sie das Kontextmenü für den Ordner search, und klicken Sie dann auf Hinzufügen > Neues Element.
Wählen Sie im mittleren Bereich des Dialogfelds Neues Element hinzufügen die Option Suchergebnisseite. Behalten Sie für dieses Beispiel den im Feld Name angezeigten Standardnamen searchResults.html bei.
Wählen Sie Hinzufügen.
Visual Studio fügt dem Projekt im neuen Ordner search die Dateien searchResults.html, searchResults.css und searchResults.js hinzu.
Hinzufügen eines SearchBox-Steuerelements
Für die Suchergebnisseite sind noch weitere Schritte erforderlich, aber zuerst fügen wir der App ein SearchBox-Steuerelement hinzu. Die Nutzung eines SearchBox-Steuerelements erleichtert das Testen der Suchergebnisseite während der Implementierung.
Mit einem SearchBox-Steuerelement können Benutzer Abfragen eingeben. Es kann auch Vorschläge anzeigen. Um der App ein SearchBox-Steuerelement hinzuzufügen, fügen Sie einfach diesen Markupcode einer HTML-Seite hinzu:
<div class="searchBox"
data-win-control="WinJS.UI.SearchBox"
data-win-options="{placeholderText: 'Search'}">
</div>
(Sie müssen die App auch für das onquerysubmitted-Ereignis registrieren, dies erledigen wir in einem späteren Schritt.)
Wo sollte das Suchfeld platziert werden? Wir empfehlen Ihnen, auf jeder Seite der App ein Suchfeld anzuordnen, damit Benutzer jederzeit leicht eine Suche durchführen können. Falls der Platz knapp ist, können Sie das Suchfeld in eine App-Leiste am oberen Bildschirmrand einfügen.
Hinzufügen eines Suchfelds zu einer Seite
Fügen wir nun einer Seite Ihrer App ein SearchBox-Steuerelement hinzu. Diese Anweisungen eignen sich für jede Seite, die auf einem Page-Steuerelement basiert.
Die beste Position für das SearchBox-Steuerelement ist in der Regel die obere rechte Ecke der Seite. Die meisten Seiten, die Sie aus einer Visual Studio-Vorlage erstellen (z. B. aus der Vorlage Seitensteuerelement), enthalten ein header-Element mit dem Seitentitel und einer Schaltfläche "Zurück":
<header aria-label="Header content" role="banner"> <button data-win-control="WinJS.UI.BackButton"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle"></span> </h1> </header>Fügen Sie einfach Ihr SearchBox-Steuerelement hinter dem h1-Element hinzu:
<header aria-label="Header content" role="banner"> <button data-win-control="WinJS.UI.BackButton"></button> <h1 class="titlearea win-type-ellipsis"> <span class="pagetitle">Welcome to basicPage</span> </h1> <div class="searchBox" data-win-control="WinJS.UI.SearchBox" data-win-options="{placeholderText: 'Search'}"> </div> </header>(Empfohlen) Sie sollten Ihren Benutzern die Suche nach Inhalten in Ihrer App durch einfache Texteingabe über die Tastatur ermöglichen.
Viele Benutzer verwenden eine Tastatur zur Interaktion mit Windows 8. Indem Sie den Benutzern ermöglichen, durch Tippen auf der Tastatur zu suchen, nutzen Sie die Tastaturinteraktion effizient aus und bieten in Ihrer App eine mit der Startseite konsistente Sucherfahrung.
Legen Sie die focusOnKeyboardInput-Eigenschaft des SearchBox-Steuerelements auf true fest, damit das Suchfeld Eingaben des Benutzers empfängt.
<div class="searchBox" data-win-control="WinJS.UI.SearchBox" data-win-options="{placeholderText: 'Search', focusOnKeyboardInput: true }"> </div>Das default.css-Stylesheet, das Visual Studio für Sie erstellt, wendet auf die Headerelemente ein -ms-grid-Layout an. Um das SearchBox-Steuerelement in der rechten oberen Ecke der Seite zu platzieren, fügen Sie einfach diesen Stil der CSS-Datei (Cascading Style Sheets) für die Seite hinzu:
.searchBox { -ms-grid-column: 4; margin-top: 57px; margin-right: 29px; }
Behandeln des onquerysubmitted-Ereignisses
Wahrscheinlich enthält Ihre App mehrere SearchBox-Steuerelemente. Wir definieren nun einen einzelnen onquerysubmitted-Ereignishandler, den alle verwenden können.
Öffnen Sie die zur App gehörende Datei default.js.
Erstellen Sie einen onquerysubmitted-Ereignishandler mit dem Namen "querySubmittedHandler", der ein einzelnes Argument mit dem Namen "args" akzeptiert. (Diese Methodendefinition können Sie an einer beliebigen Stelle in der anonymen Funktion platzieren, die den vorhandenen default.js-Code umschließt.)
function querySubmittedHandler(args) { }Navigieren Sie mit dem Ereignishandler zur neuen Suchergebnisseite, indem Sie WinJS.Navigation.navigate aufrufen. Die
args.details-Eigenschaft enthält ein Objekt, das Informationen zum von der Suchergebnisseite benötigten Ereignis bereitstellt. Übergeben Sie daher dieses Objekt, wenn Sie WinJS.Navigation.navigate aufrufen.function querySubmittedHandler(args) { WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail); }Warnung Wenn Sie die App mithilfe der Vorlage Leere App erstellt haben, müssen Sie der App Navigationsunterstützung hinzufügen, damit die Suche funktioniert. Die Unterstützung der Navigation kann wie bei den Vorlagen für Raster- und Navigations-Apps und geteilte Apps bereitgestellt werden, indem Sie Ihrer App ein benutzerdefiniertes Steuerelement namens
PageControlNavigatorhinzufügen. Wie dieses benutzerdefinierte Steuerelement die Navigation unterstützt, sehen Sie unter Schnellstart: Verwenden der Einzelseitennavigation. Wenn Sie die Navigation lieber ohne benutzerdefiniertes Steuerelement unterstützen möchten, müssen Sie eigenen Code schreiben, das auf Navigationsereignisse wie WinJS.Navigation.navigated lauscht und darauf reagiert. Ein Beispiel zur Unterstützung der Navigation ohne ein benutzerdefiniertes Steuerelement wiePageControlNavigatorfinden Sie unter Beispiel für Navigation und Navigationsverlauf.Nun müssen wir diesen Ereignishandler öffentlich verfügbar machen, indem wir einen Namespace definieren und den Handler als Member festlegen. Nennen wir den Namespace "SearchUtils". Außerdem müssen wir die WinJS.UI.eventHandler-Methode verwenden, damit wir den Ereignishandler deklarativ festlegen können (weitere Informationen dazu finden Sie unter So wird's gemacht: Deklaratives Festlegen von Ereignishandlern).
WinJS.Namespace.define("SearchUtils", { querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler) } );Öffnen Sie die HTML-Seite mit dem SearchBox. Legen Sie mit der "data-win-options"-Eigenschaft das onquerysubmitted-Ereignis auf
SampleUtils.querySubmittedHandlerfest.<div class="searchBox" data-win-control="WinJS.UI.SearchBox" data-win-options="{placeholderText: 'Search', focusOnKeyboardInput: true, onquerysubmitted: SearchUtils.querySubmittedHandler}"> </div>
Lassen Sie es uns ausprobieren. Führen Sie die App aus, geben Sie eine Testabfrage in das SearchBox ein, und drücken Sie die EINGABETASTE. Wenn Sie die in Visual Studio bereitgestellten Beispieldaten verwenden, versuchen Sie es mit der Testabfrage "1".
.png "Testabfrage")
Der onquerysubmitted-Ereignishandler, den Sie geschrieben haben, navigiert zur Suchergebnisseite und übergibt die von Ihnen eingegebene Abfrage.
.png "Ergebnisse der Testabfrage")
Wenn Sie die Beispieldaten verwendet haben, sollten Übereinstimmungen für die Testabfrage angezeigt werden. Wenn Sie eigene Daten verwenden, erhalten Sie möglicherweise noch keine Ergebnisse. Wir müssen zuerst die Suchergebnisseite aktualisieren. Dazu kommen wir in einem späteren Schritt.
Durchsuchen der Daten
Nun wechseln wir zurück auf die Suchergebnisseite. Wenn die App zur Suchergebnisseite navigiert, wird als eine der ersten Methoden die _handleQuery-Methode aufgerufen. Die _handleQuery-Methode ruft verschiedene Methoden auf, die wir ändern sollten:
_generateFiltersGeneriert die Liste der Filter, auf die Benutzer klicken können, um die Ergebnisse zu filtern.
_searchDataDurchsucht die Daten nach übereinstimmenden Elementen und speichert diese in einer List mit dem Namen
originalResults._populateFilterBarZeigt die Filter aus der Filterliste an.
Aktualisieren wir nun diese Methoden, um sie für Ihre Daten anzupassen.
Aktualisieren der Filter
Die _generateFilters-Methode generiert die Liste der Filter, auf die Benutzer klicken können, um die Ergebnisse zu filtern. Die von der Vorlage generierte Methode erstellt drei Filter: den Filter "All", mit dem alle Ergebnisse angezeigt werden, einen Filter zum Anzeigen der Elemente von Gruppe 1 und einen Filter zum Anzeigen aller anderen Ergebnisse. Wir ersetzen nun den von der Vorlage generierten Code durch Code, der die Filterliste dynamisch generiert. Auf diese Weise werden neue Filter auf der Seite angezeigt, wenn Sie die Beispieldaten ändern. Wir aktualisieren den _generateFilters-Code und erstellen zwei Hilfsmethoden. Zuerst müssen wir aber die Datei data.js aktualisieren, damit wir auf die Liste der Gruppen zugreifen können. Diese Gruppen verwenden wir zum Definieren unserer Filter.
Aktualisieren der _generateFilters-Methode
Suchen Sie in searchResults.js die
_generateFilters-Methode, und löschen Sie den gesamten darin enthaltenen Code.Initialisieren Sie das
_filters-Array. (Das_filters-Array ist eine durch die Suchergebnisseite definierte Membervariable.)_generateFilters: function () { this._filters = [];Erstellen Sie jetzt einen Filter. Ein Filter ist ein Objekt mit drei Eigenschaften:
results: Eine List der Elemente, die angezeigt werden sollen. Hier legen wir für den Moment null fest.text: Der Anzeigetext für den Filter.predicate: Eine Funktion, die ein Element akzeptiert. Wenn das Element den Filterkriterien entspricht (wenn es bei Auswahl dieses Filters angezeigt werden sollte), gibt diese Funktion true zurück, andernfalls gibt sie false zurück.
Zuerst erstellen wir den Filter "All". Mit dem Filter "All" werden immer Elemente angezeigt, daher gibt sein
predicateimmer true zurück.this._filters.push({ results: null, text: "All", predicate: function (item) { return true; } });Nun erstellen wir für jede Gruppe in unseren Daten einen Filter. Die Gruppen sind in einer List mit dem Namen
Data.groupsgespeichert. Durchlaufen Sie mit der forEach-Methode die einzelnen Gruppen in der List. Die forEach-Methode akzeptiert eine Funktion als Parameter. Diese Funktion wird für jedes Element in der Liste aufgerufen. Übergeben wir nun eine Memberfunktion namens_createFiltersForGroups. Die Funktion erstellen wir im nächsten Schritt.if (window.Data) { Data.groups.forEach(this._createFiltersForGroups.bind(this)); } },Jetzt erstellen wir die
_createFiltersForGroups-Funktion.Erstellen Sie eine Memberfunktion namens
_createFiltersForGroups, die drei Parameter akzeptiert: element, index und array._createFiltersForGroups: function (element, index, array){Der element-Parameter enthält unser Gruppenobjekt. Erstellen Sie ein neues Filterobjekt, und fügen Sie es mit der push-Methode dem
_filters-Array hinzu. Legen Sie dieresults-Eigenschaft des Filters auf null, dietext-Eigenschaft auf element.titleund diepredicate-Eigenschaft auf eine Funktion namens_filterPredicatefest. Die_filterPredicate-Methode definieren Sie im nächsten Schritt.this._filters.push( { results: null, text: element.title, predicate: this._filterPredicate.bind(element)} ); },Erstellen Sie eine Memberfunktion mit dem Namen
_filterPredicate, die einen einzelnen Parameter namens item akzeptiert. Geben Sie true zurück, wenn diegroup-Eigenschaft des item-Parameters dem aktuellen Gruppenobjekt entspricht._filterPredicate: function (item) { return item.group === this; },
Hier ist der vollständige Code für die drei gerade erstellten Methoden:
_generateFilters: function () {
this._filters = [];
this._filters.push({ results: null, text: "All", predicate: function (item) { return true; } });
if (window.Data) {
Data.groups.forEach(this._createFiltersForGroups.bind(this));
}
},
_createFiltersForGroups: function (element, index, array){
this._filters.push(
{ results: null, text: element.title, predicate: this._filterPredicate.bind(element)}
);
},
_filterPredicate: function (item) {
return item.group === this;
},
Führen Sie die App aus, und führen Sie eine Suche aus. Auf der Filterleiste sollten Sie die neuen Filter sehen.
.png "Aktualisierte Filterliste")
Wenn Sie die von der Vorlage generierten Beispieldaten verwenden, fällt Ihnen möglicherweise auf, dass einige der Gruppen abgeschnitten sind. Das Problem können Sie beheben, indem Sie die CSS-Datei für die Suchergebnisseite anpassen.
Aktualisieren der CSS-Datei für die Suchergebnisseite
Öffnen Sie searchResults.css.
Suchen Sie den
.searchResults section[role=main]-Stil, und ändern Sie den Wert der -ms-grid-rows-Eigenschaft in "auto 1fr"..searchResults section[role=main] { /* Define a grid with rows for the filters and results */ -ms-grid-columns: 1fr; -ms-grid-rows: auto 1fr; -ms-grid-row: 1; -ms-grid-row-span: 2; display: -ms-grid; }Suchen Sie den
.searchResults section[role=main] .filterbar-Stil, ändern Sie den Wert der word-wrap-Eigenschaft in "normal", und legen Sie margin-bottom auf "20px" fest..searchResults section[role=main] .filterbar { -ms-font-feature-settings: "case" 1; -ms-grid-row: 1; list-style-type: none; margin-left: 60px; margin-right: 60px; margin-top: 133px; max-width: calc(100% - 120px); position: relative; white-space: normal; z-index: 1; margin-bottom: 20px; }Suchen Sie den
.searchResults section[role=main] .filterbar li-Stil, und ändern Sie den Wert der display-Eigenschaft in "inline-block"..searchResults section[role=main] .filterbar li { display: inline-block; margin-left: 20px; margin-right: 20px; margin-top: 5px; opacity: 0.6; }Suchen Sie den
.searchResults section[role=main] .resultslist-Stil, ändern Sie den Wert der -ms-grid-row-Eigenschaft in "2", und legen Sie -ms-grid-row-span auf "1" fest..searchResults section[role=main] .resultslist { -ms-grid-row: 2; -ms-grid-row-span: 1; height: 100%; position: relative; width: 100%; z-index: 0; }
Führen Sie die App aus, und führen Sie eine weitere Suche aus. Jetzt sollten Sie alle Filter sehen.
.png "Aktualisierte Filterliste")
Aktualisieren des Suchalgorithmus
Die _searchData-Methode sucht nach Daten für Elemente, die der Suchabfrage entsprechen. Der von der Vorlage generierte Code durchsucht Titel, Untertitel und Beschreibung der einzelnen Elemente. Wir schreiben nun unseren eigenen Suchcode, der die Ergebnisse nach Relevanz bewertet.
Aktualisieren der _searchData-Methode
Öffnen Sie searchResults.js, suchen Sie die
_searchData-Methode, und löschen Sie den darin enthaltenen Code.Erstellen Sie eine Variable mit dem Namen
originalResults, die wir als Rückgabewert verwenden.// This function populates a WinJS.Binding.List with search results for the // provided query. _searchData: function (queryText) { // Create a variable for the results list. var originalResults;Nun lassen wir die Suche die Groß-/Kleinschreibung berücksichtigen, indem wir den Abfragetext und den gesuchten Test in Kleinbuchstaben konvertieren. Zunächst konvertieren wir die Abfrage in Kleinbuchstaben und speichern sie als Variable mit dem Namen
lowercaseQueryText.// Convert the query to lowercase. var lowercaseQueryText = queryText.toLocaleLowerCase();Bevor wir versuchen, auf die Daten zuzugreifen, stellen wir sicher, dass sie vorhanden sind.
if (window.Data) {Wenn Sie die Beispieldaten aus data.js verwenden, werden unsere Elemente in
Data.itemsgespeichert, einem WinJS.Binding.List-Objekt. Filtern Sie mit der createFiltered-Methode Elemente heraus, die der Suchabfrage nicht entsprechen.Die createFiltered-Methode akzeptiert eine Filterfunktion als Parameter. Diese Filterfunktion akzeptiert einen einzelnen Parameter, item. Die List ruft diese Funktion für jedes Element in der Liste auf, um zu ermitteln, ob das Element in der gefilterten Liste enthalten sein sollte. Die Funktion gibt true zurück, wenn das Element enthalten sein sollte, bzw. false, wenn es ausgelassen werden sollte.
originalResults = Data.items.createFiltered( function (item) {In JavaScript können Sie vorhandenen Objekten neue Eigenschaften anfügen. Fügen Sie eine
ranking-Eigenschaft zu item hinzu, und legen Sie ihren Wert auf "-1" fest.// A ranking < 0 means that a match wasn't found. item.ranking = -1;Überprüfen wir als Erstes, ob der Abfragetext im Titel des Elements enthalten ist. Wenn ja, erhält das Element zehn Punkte.
if (item.title.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) { item.ranking += 10; }Als Nächstes suchen wir nach Treffern im Feld für den Untertitel. Wenn wir eine Übereinstimmung finden, erhält das Element fünf Punkte.
if (item.subtitle.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) { item.ranking += 5; }Zum Schluss überprüfen wir das Beschreibungsfeld. Wenn wir eine Übereinstimmung finden, erhält das Element einen Punkt.
if (item.description.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) { item.ranking += 1; }Wenn das Element die Bewertung -1 hat, bedeutet dies, dass es der Suchabfrage nicht entspricht. Als Rückgabewert geben wir true zurück, wenn das Element eine Bewertung von mindestens 0 hat.
return (item.ranking >= 0); } );Bis jetzt haben wir die Liste so gefiltert, dass nur die der Suchabfrage entsprechenden Elemente angezeigt werden, und wir haben Bewertungsinformationen hinzugefügt. Nun sortieren wir mit der createSorted-Methode die Ergebnisliste so, dass die Elemente mit den meisten Punkten zuerst angezeigt werden.
// Sort the results by the ranking info we added. originalResults = originalResults.createSorted(function (firstItem, secondItem){ if (firstItem.ranking == secondItem.ranking) { return 0; } else if (firstItem.ranking < secondItem.ranking) return 1; else return -1; }); }Wenn unsere Daten fehlen, erstellen Sie eine leere Liste.
else { // For some reason, the Data namespace is null, so we // create an empty list to return. originalResults = new WinJS.Binding.List(); }Geben Sie zum Schluss die Ergebnisse zurück.
return originalResults; }
Hier ist der vollständige Code für die aktualisierte _searchData-Methode:
_searchData: function (queryText) {
// Create a variable for the results list.
var originalResults;
// Convert the query to lowercase.
var lowercaseQueryText = queryText.toLocaleLowerCase();
if (window.Data)
{
originalResults = Data.items.createFiltered(
function (item) {
// A ranking < 0 means that a match wasn't found.
item.ranking = -1;
if (item.title.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) {
item.ranking += 10;
}
if (item.subtitle.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) {
item.ranking += 5;
}
if (item.description.toLocaleLowerCase().indexOf(lowercaseQueryText) >= 0) {
item.ranking += 1;
}
return (item.ranking >= 0);
}
);
// Sort the results by the ranking info we added.
originalResults = originalResults.createSorted(function (firstItem, secondItem){
if (firstItem.ranking == secondItem.ranking) {
return 0;
}
else if (firstItem.ranking < secondItem.ranking)
return 1;
else
return -1;
});
}
else {
// For some reason, the Data namespace is null, so we
// create an empty list to return.
originalResults = new WinJS.Binding.List();
}
return originalResults;
}
Bereitstellen der Navigation für die von der Suche zurückgegebenen Elemente
Wenn Sie die App ausführen und eine Suche ausführen, werden die Ergebnisse auf der Suchergebnisseite in einem ListView-Steuerelement angezeigt. Wenn Sie jetzt auf eines der Suchergebniselemente klicken, geschieht nichts. Wir fügen nun Code hinzu, um das Element anzuzeigen, wenn der Benutzer darauf klickt.
Wenn der Benutzer auf ein Element in einer ListView klickt, löst die ListView das oniteminvoked-Ereignis aus. Der von der Vorlage generierte Code für unsere Suchergebnisseite definiert einen oniteminvoked-Ereignishandler mit dem Namen _itemInvoked. Aktualisieren wir nun den Code, um zum aufgerufenen Element zu navigieren.
So fügen Sie Elementen den Code für die Navigation hinzu
Öffnen Sie die Datei searchResults.js, und fügen Sie der
_itemInvoked-Funktion Code für die Navigation zur richtigen Seite hinzu. Achtung Der hier gezeigte URI ist für die Hub-Vorlage bestimmt. Für die Grid-Vorlage muss der URI wie folgt lauten: /pages/itemDetail/itemDetail.html. Für die Split-Vorlage muss die URL wie folgt lauten: /pages/items/items.html._itemInvoked: function (args) { args.detail.itemPromise.done(function itemInvoked(item) { // TODO: Navigate to the item that was invoked. var itemData = [item.groupKey, item.data.title]; WinJS.Navigation.navigate("/pages/item/item.html", { item: itemData }); }); },
(Optional) Aktualisieren der "itemTemplate" für das ListView-Steuerelement
Die von der Vorlage generierte Suchergebnisseite definiert eine itemTemplate, die für die Zusammenarbeit mit der Beispieldatenquelle ausgelegt ist, die Visual Studio für Sie erstellt. Für jedes Datenelement werden die folgenden Felder erwartet: "image", "title", "subtitle", und "description".
Wenn Ihre Datenelemente über andere Felder verfügen, müssen Sie das itemTemplate-Element ändern. Anweisungen finden Sie unter Schnellstart: Hinzufügen einer "ListView".
(Optional) Hinzufügen von Suchvorschlägen
Unterhalb des Suchfelds im Suchbereich werden Suchvorschläge angezeigt. Vorschläge sind wichtig, da sie den Benutzern Zeit sparen und wichtige Hinweise zu den Inhalten geben, nach denen die Benutzer in Ihrer App suchen können.
Die Vorschläge können aus verschiedenen Quellen stammen:
- Sie können sie selbst definieren. Beispielsweise können Sie eine Liste von Autoherstellern erstellen.
- Sie können von Windows stammen, wenn Ihre App lokale Dateien durchsucht.
- Sie können sie von einem Webdienst oder -server abrufen.
Richtlinien für die Benutzeroberfläche zum Anzeigen von Vorschlägen finden Sie unter Richtlinien und Prüfliste für die Suchfunktion.
Mit LocalContentSuggestionSettings können Sie in nur wenigen Codezeilen auf lokalen Dateien von Windows basierende Vorschläge hinzufügen. Alternativ können Sie das onsuggestionsrequested-Ereignis des Suchfeldsteuerelements registrieren und eine eigene Liste mit Vorschlägen erstellen, die aus einer anderen Quelle (z. B. einer lokal definierten Liste oder einem Webdienst) stammen. In dieser Schnellstartanleitung wird das Behandeln des onsuggestionsrequested-Ereignisses veranschaulicht.
Weitere Codebeispiele, die das Hinzufügen von Suchvorschlägen veranschaulichen, finden Sie im SearchBox-Steuerelementbeispiel. Das Beispiel zeigt, wie Suchvorschläge mit allen drei möglichen Quellen hinzugefügt werden können. Das Hinzufügen von Vorschlägen für ostasiatische Sprachen mit dem Eingabemethoden-Editor (Input Method Editor, IME) mithilfe von alternativen Formen des Abfragetexts wird ebenfalls gezeigt. (Wir empfehlen Ihnen die Verwendung alternativer Abfragetexte, wenn Ihre App auch für japanische oder chinesische Nutzer bestimmt ist.)
Behandeln des SuggestionsRequested-Ereignisses
Vermutlich verfügt Ihre App über mehrere SearchBox-Steuerelemente. Daher definieren wir in der Datei default.js einen zentralen Ereignishandler, der von allen Steuerelementen verwendet werden kann. Fügen Sie diesen Code nach der
querySubmittedHandler-Methode hinzu, die Sie in einem früheren Schritt erstellt haben.function suggestionsRequestedHandler(args) {Konvertieren Sie den SearchBox-Abfragetext in Kleinbuchstaben.
var query = args.detail.queryText.toLocaleLowerCase();Das System stellt automatisch einige Suchvorschläge bereit, z. B. vorherige Suchvorgänge des Benutzers. Wir fügen unsere Suchvorschläge den vom System bereitgestellten Vorschlägen hinzu.
// Retrieve the system-supplied suggestions. var suggestionCollection = args.detail.searchSuggestionCollection;Vergewissern Sie sich, dass die Abfrage mindestens ein Zeichen enthält und dass wir Zugriff auf unsere Daten haben.
if (query.length > 0 && window.Data) {Durchlaufen Sie alle Elemente Ihrer Daten, und führen Sie eine Überprüfung auf Übereinstimmungen durch. Wenn eine Übereinstimmung gefunden wird, hängen wir den Titel des übereinstimmenden Elements an die Auflistung mit den Suchvorschlägen an.
Data.items.forEach( function (element, index, array) { if (element.title.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element.title); } });Die
args.detail.linguisticDetails.queryTextAlternatives-Eigenschaft liefert zusätzliche Vorschläge für Benutzer, die Text über einen Eingabemethoden-Editor (Input Method Editor, IME) eingeben. Die Verwendung dieser Vorschläge verbessert das Sucherlebnis für Benutzer, die ostasiatische Sprachen nutzen. Als Nächstes überprüfen wir die Abfragetextalternativen für Zeichenfolgen, die die ursprüngliche Abfrage enthalten, und fügen sie unserer Liste mit den Suchvorschlägen hinzu.args.detail.linguisticDetails.queryTextAlternatives.forEach( function (element, index, array) { if (element.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element); } }); } }Dies ist der gesamte Code, den wir für unseren Ereignishandler für Suchvorschläge benötigen. Hier ist die vollständige
suggestionsRequestedHandler-Methode:function suggestionsRequestedHandler(args) { var query = args.detail.queryText.toLocaleLowerCase(); // Retrieve the system-supplied suggestions. var suggestionCollection = args.detail.searchSuggestionCollection; if (query.length > 0 && window.Data) { Data.items.forEach( function (element, index, array) { if (element.title.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element.title); } }); args.detail.linguisticDetails.queryTextAlternatives.forEach( function (element, index, array) { if (element.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element); } }); } }Hinweis Bei einer asynchronen Datenquelle müssen Sie Updates für die Sammlung der Suchvorschläge in ein Promise einschließen. Der Beispielcode verwendet eine List, das heißt eine synchrone Datenquelle. Wenn List aber eine asynchrone Datenquelle ist, sieht die Methode so aus.
function suggestionsRequestedHandler(args) { var query = args.detail.queryText.toLocaleLowerCase(); // Retrieve the system-supplied suggestions. var suggestionCollection = args.detail.searchSuggestionCollection; if (query.length > 0 && window.Data) { args.detail.setPromise(WinJS.Promise.then(null, function () { Data.items.forEach( function (element, index, array) { if (element.title.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element.title); } }); args.detail.linguisticDetails.queryTextAlternatives.forEach( function (element, index, array) { if (element.substr(0, query.length).toLocaleLowerCase() === query) { suggestionCollection.appendQuerySuggestion(element); } }); }) ); } }Dies ist der gesamte Code, den wir für unseren Ereignishandler für Suchvorschläge benötigen. Nun ermöglichen wir den öffentlichen Zugriff, indem wir den Ereignishandler über den in einem früheren Schritt definierten
SearchUtils-Namespace verfügbar machen:WinJS.Namespace.define("SearchUtils", { querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler), suggestionsRequestedHandler: WinJS.UI.eventHandler(suggestionsRequestedHandler) } );Nun registrieren wir das Ereignis beim SearchBox-Steuerelement. Öffnen Sie die HTML-Seite mit dem SearchBox-Steuerelement, und legen Sie das onsuggestionsrequested-Ereignis auf
SearchUtils.suggestionsRequestedHandlerfest.<div class="searchBox" data-win-control="WinJS.UI.SearchBox" data-win-options="{placeholderText: 'Search', focusOnKeyboardInput: true, onquerysubmitted: SearchUtils.querySubmittedHandler, onsuggestionsrequested: SearchUtils.suggestionsRequestedHandler}"> </div>
Implementieren des Vertrags für "Suche" (für vorherige Versionen von Windows)
In Betriebssystemen vor Windows 8.1 wurde von Apps zum Bereitstellen der In-App-Suche der Charm "Suche" verwendet. Entwickler haben den Vertrag für "Suche" implementiert und die SearchPane-API genutzt, um Abfragen zu verarbeiten und Vorschläge und Ergebnisse zu erhalten.
Auch wenn der Vertrag für "Suche" und die SearchPane-API von Windows 8 weiterhin vollständig unterstützt werden, empfehlen wir ab Windows 8.1 anstelle von SearchPane die Verwendung des SearchBox-Steuerelements. Für Apps, für die das SearchBox-Steuerelement verwendet wird, muss der Vertrag für "Suche" nicht implementiert werden.
Sollten für eine App das SearchPane-Element und der Vertrag für "Suche" überhaupt verwendet werden? Wenn Sie davon ausgehen, dass Benutzer in Ihrer App nicht viele Suchvorgänge durchführen, können Sie das SearchPane-Element und den Vertrag für "Suche" nutzen. Wir empfehlen Ihnen die Nutzung einer Schaltfläche mit der Suchglyphe (Segoe UI Symbol 0xE0094, 15 Punkt) in der App, auf die Benutzer klicken können, um den Suchbereich zu aktivieren. Code, mit dem das SearchPane-Steuerelement und der Vertrag für "Suche" implementiert werden, finden Sie im Beispiel für den Vertrag für "Suche".
Zusammenfassung und nächste Schritte
Sie haben Ihrer App mithilfe des SearchBox-Steuerelements und der Suchergebnisseite eine Suchfunktion hinzugefügt.
Tipps für die Erstellung einer benutzerfreundlichen Suchfunktion finden Sie unter Richtlinien und Prüfliste für die Suchfunktion.