Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Hinzufügen einer Elementvorlage vom Typ "Suchergebnisse"

In diesem Thema wird gezeigt, wie Sie einem Benutzer das Suchen nach Informationen in Ihrer App ermöglichen, indem Sie die in Visual Studio enthaltene Elementvorlage "Suchergebnisse" verwenden. Die Elementvorlage für die Suche ermöglicht es einer App, eine Seite mit Suchergebnissen für eine Suche anzuzeigen, die mit dem WinJS.UI.SearchBox-Steuerelement initiiert wurde. Beschreibungen der Elementvorlagen finden Sie unter JavaScript-Elementvorlagen. Bei den meisten Apps können Sie die in Microsoft Visual Studio 2013 enthaltenen Vorlagen verwenden, um die App-Entwicklung zu vereinfachen.

Bei der Seite "Suchergebnisse" handelt es sich um ein Seitensteuerelement, das das empfohlene Navigationsmodell für Windows Store-Apps implementiert. Dieses Navigationsmodell wird von den Projektvorlagen "Hub", "Grid", "Split" und "Navigation" implementiert. Weitere Informationen finden Sie unter Navigationsmodell.

Wichtig  Wenn Sie die Elementvorlage "Suchergebnisse" mit der Projektvorlage "Navigation Application" oder "Blank Application" verwenden möchten, müssen Sie zusätzliche Projektdateien hinzufügen. Weitere Informationen dazu finden Sie in der folgenden Liste.

Weitere Informationen dazu und zu anderen Methoden zum Implementieren der Suche finden Sie unter Schnellstart: Hinzufügen einer Suche.

Die Verfahren in diesem Thema zeigen, wie Sie die Elementvorlage "Suchergebnisse" den Vorlagen "Hub", "Grid" und "Split" hinzufügen. Beachten Sie beim Hinzufügen der Elementvorlage zu einer anderen Projektvorlage Folgendes:

  • Fügen Sie Ihrem Projekt für die Vorlage "Blank" die Datei "navigator.js" hinzu. (Sie finden diese Datei in einer anderen Projektvorlage, beispielsweise in der Vorlage "Grid".) In "default.html" müssen Sie auch Code zum Hosten von Inhalten hinzufügen. Weitere Informationen finden Sie unter Navigationsmodell.
  • Fügen Sie Ihrem Projekt für die Vorlagen "Navigation" und "Blank" die Datei "data.js" hinzu (Sie finden diese Datei in einer anderen Projektvorlage, beispielsweise in der Vorlage "Grid"), oder implementieren Sie Ihre eigene Methode für den Datenzugriff.
  • Fügen Sie für die Vorlagen "Navigation" und "Blank" in der für die Vorlage spezifischen Startseite das Suchsteuerelement und die zugehörigen Ereignishandler hinzu. Für die Vorlage "Navigation" lautet die Startseite "home.html". Für die Vorlage "Blank" müssen Sie Ihre eigene Startseite erstellen oder "default.html" verwenden.

Hinzufügen der Elementvorlage "Suchergebnisse"

Das folgende Verfahren zeigt das Hinzufügen der Elementvorlage "Suchergebnisse" zu einer Projektvorlage.

Hh923025.wedge(de-de,WIN.10).gifSo fügen Sie die Elementvorlage "Suchergebnisse" hinzu

  1. Erstellen Sie in Visual Studio ein neues Projekt. Verwenden Sie für dieses Beispiel die Vorlage "Hub", "Grid" oder "Split".
  2. Fügen Sie im Projektmappen-Explorer dem Projektordner pages einen neuen Ordner namens search hinzu.
  3. Öffnen Sie das Kontextmenü für den Ordner search, und klicken Sie dann auf Hinzufügen > Neues Element.
  4. 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.
  5. 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.

  6. Öffnen Sie die Datei "searchResults.js", und vergewissern Sie sich, dass der URI für die Suchseite korrekt ist:
    
    
    var searchPageURI = "/pages/search/searchResults.html";
    
    
    

    Wenn Sie die Suchdateien nicht im Ordner search ablegen, müssen Sie den URI aktualisieren.

  7. Öffnen Sie die Datei "searchResults.html", und vergewissern Sie sich, dass der Verweis auf searchResults.css korrekt ist.
    
    
    <link href="/pages/search/searchResults.css" rel="stylesheet" />
    
    
    

Hinzufügen des Steuerelements für die Suche (Hub-Vorlage)

Verwenden Sie das WinJS.UI.SearchBox-Steuerelement, damit der Benutzer Ihre App nach Daten durchsuchen kann. Diese Schritte sind für jede Projektvorlage unterschiedlich. Diese Anweisungen gelten für die Vorlage "Hub". Wenn Sie die Vorlage "Grid" oder "Split" verwenden möchten, helfen Ihnen die Informationen im nächsten Abschnitt weiter: Hinzufügen des Steuerelements für die Suche (Grid- oder Split-Vorlage).

Hh923025.wedge(de-de,WIN.10).gifSo fügen Sie der Seite das Steuerelement für die Suche hinzu

  1. Fügen Sie auf der Startseite der App ("hub.html") das SearchBox-Steuerelement dem DIV-Element des ersten HubSection-Steuerelements hinzu.
    
    
    <div class="hero" data-win-control="WinJS.UI.HubSection">
        <div class="searchBox" data-win-control="WinJS.UI.SearchBox">
        </div>
    </div>
    
    
  2. Geben Sie in der CSS-Datei für die Startseite ("hub.css") die Anzeigeeigenschaften für das SearchBox-Steuerelement an. Nach den Regeln für den ersten Hub-Abschnitt können Sie den folgenden CSS-Code einfügen.
    
    
    .hubpage .hub .hero .win-hub-section-header {
        display: none;
    }
        
    .hubpage .hub .hero .searchBox {
        margin-left: 400px;
        margin-top: 200px;
    }
    
    
  3. Erstellen Sie in der JavaScript-Datei für die Startseite ("hub.js") einen Ereignislistener für das onquerysubmitted-Ereignis. Der Handler erfasst Abfragen vom SearchBox-Steuerelement.

    Erstellen Sie den Listener in der ready-Funktion, wo die Codekommentare angeben, dass Sie einen Initialisierungscode hinzufügen müssen.

    
    // TODO: Initialize the hub sections here.
    var elem = document.querySelector(".searchBox");
    elem.addEventListener("querysubmitted", this.searchHandler.bind(this));
    
    
  4. Fügen Sie in der Datei "hub.js" den Ereignishandler zum Navigieren zur Suchergebnisseite hinzu. Fügen Sie den Ereignishandler in demselben Bereich wie die ready-Funktion hinzu:

    Wichtig  Entfernen Sie das Komma aus dem unten angegebenen Code, falls es sich um die letzte Funktion handelt, die Sie für die Seite definieren.

    
    searchHandler: function (args) {
        WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
    },
    
    

    Tipp  Im vorherigen Code enthält die detail-Eigenschaft der Ereignisargumente Informationen zu der Abfrage, beispielsweise zum Abfragetext.

  5. Um den Vorgang mit der Hub-Vorlage fortzusetzen, überspringen Sie den nächsten Abschnitt, und schlagen Sie unter Bereitstellen der Navigation für die von der Suche zurückgegebenen Elemente nach.

Hinzufügen des Steuerelements für die Suche (Grid- oder Split-Vorlage)

Verwenden Sie das WinJS.UI.SearchBox-Steuerelement, damit der Benutzer Ihre App nach Daten durchsuchen kann. Diese Schritte sind für jede Projektvorlage unterschiedlich. Diese Anweisungen gelten für die Grid-Vorlage und Split-Vorlage.

Hh923025.wedge(de-de,WIN.10).gifSo fügen Sie der Seite das Steuerelement für die Suche hinzu

  1. Fügen Sie auf der Startseite der App ("groupedItems.html" in Grid und "items.html" in Split) das SearchBox-Steuerelement hinzu.

    Positionieren Sie das Steuerelement hinter dem SECTION-Element für das ListView-Steuerelement innerhalb des DIV-Elements für das Seitenfragment (mit dem Klassennamen fragment groupeditemspage oder fragment itemspage). (Der hier gezeigte Code ist für die Grid-Vorlage bestimmt.)

    
    
    <section aria-label="Main content" role="main">
        <div class="groupeditemslist win-selectionstylefilled" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
                layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
                selectionMode: 'none',
                currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
                groupDataSource: Data.groups.dataSource,
                groupHeaderTemplate: select('.headertemplate'),
                itemDataSource: Data.items.dataSource,
                itemTemplate: select('.itemtemplate'),
                ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
                oniteminvoked: select('.pagecontrol').winControl.itemInvoked
            }">
        </div>
    <div class="searchBox" data-win-control="WinJS.UI.SearchBox" >
    </div>
    
    
    
  2. Geben Sie in der CSS-Datei für die Startseite ("groupedItems.css" oder "items.css") die Anzeigeeigenschaften für das SearchBox-Steuerelement an. Fügen Sie am Anfang der CSS-Datei das folgende CSS hinzu. (Passen Sie nach dem Testen den margin-left-Wert an, um das Suchsteuerelement rechts neben dem App-Titel anzuzeigen.)

    Tipp  Verwenden Sie für den CSS-Code der Split-Vorlage die .itemspage-Regel anstelle von .groupeditemspage.

    
    
    .groupeditemspage .searchBox {
        margin-left: 600px;
        margin-top: 70px;
    }
    
    
  3. Erstellen Sie in der JavaScript-Datei für die Startseite ("groupedItems.js" oder "items.js") einen Ereignislistener für das onquerysubmitted-Ereignis. Der Handler erfasst Abfragen vom SearchBox-Steuerelement.

    Erstellen Sie den Ereignislistener in der ready-Funktion.

    
    
    var elem = document.querySelector(".searchBox");
    elem.addEventListener("querysubmitted", this._searchHandler.bind(this));
    
    
  4. Fügen Sie in der Datei "groupedItems.js" oder "items.js" den Ereignishandler zum Navigieren der Suchergebnisseite hinzu. Fügen Sie den Ereignishandler in demselben Bereich wie die ready-Funktion hinzu:

    Wichtig  Entfernen Sie das Komma aus dem unten angegebenen Code, falls es sich um die letzte Funktion handelt, die Sie für die Seite definieren.

    
    _searchHandler: function (args) {
        WinJS.Navigation.navigate('/pages/search/searchResults.html', args.detail);
    },
    
    
    

    Im vorherigen Code enthält die detail-Eigenschaft der Ereignisargumente Informationen zu der Abfrage, beispielsweise zum Abfragetext.

Bereitstellen der Navigation für die von der Suche zurückgegebenen Elemente

In diesem Abschnitt ändern wir die Elementvorlage "Suchergebnisse", um die Navigation zu unterstützen. Der Code für die Elementvorlage "Suchergebnisse" übernimmt die Suche. Sie können das Standardverhalten dafür ändern. Möglicherweise möchten Sie die _searchData-Funktion so ändern, dass sie mit verschiedenen App-Datentypen übereinstimmt. Standardmäßig vergleicht die Vorlage Titel und Untertitel im Datenmodell mit der Abfragezeichenfolge. In diesem Beispiel lassen wir die Suchkriterien unverändert.

Achtung  Die _searchData-Funktion sucht nach von "data.js" bereitgestellten Daten. Wenn Sie die Vorlage "Navigation" oder "Blank" verwenden, müssen Sie entweder dem Projekt die Datei "data.js" hinzufügen oder eine Methode zum Durchsuchen Ihrer eigenen Daten bereitstellen und dann die _searchData-Funktion anpassen. Weitere Infos zum Datenmodell in "data.js" finden Sie unter Hinzufügen von Daten zu einer Projektvorlage.

In diesem Beispiel implementieren wir Code, mit dem die Navigation zu den Elementen durchgeführt wird, die von der Suchabfrage zurückgegeben und auf der Suchergebnisseite angezeigt werden.

Hh923025.wedge(de-de,WIN.10).gifSo fügen Sie Elementen den Code für die Navigation hinzu

  1. Öffnen Sie die Datei "searchResults.js", und fügen Sie der _itemInvoked-Funktion Code zum Navigieren zur richtigen Seite hinzu. Dieser Code unterstützt die Navigation von der Suchergebnisseite zur Elementseite, die mit einem Suchergebnis verknüpft ist.

    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 });
        });
    },
    
    
  2. Ändern Sie in der Datei "data.js" einige Werte, damit die Suchergebnisse beim Ausführen der App leicht überprüft werden können. Ersetzen Sie in diesem Beispiel einige Titel und Untertitel in den Beispieldaten (die sampleItems-Variable) für "Hello" und "hloTitle" wie folgt:
    
    var sampleItems = [
        // . . .
        { group: sampleGroups[0], title: "Hello", subtitle: "Item Subtitle: 5", description:
            itemDescription, content: itemContent, backgroundImage: mediumGray },
    
        { group: sampleGroups[1], title: "hloTitle", subtitle: "Hello", description:
            itemDescription, content: itemContent, backgroundImage: darkGray },
        { group: sampleGroups[1], title: "Hello", subtitle: "Item Subtitle: 2", description:
            itemDescription, content: itemContent, backgroundImage: mediumGray },
        // . . .
    ];
    
    

Testen der Suche

Hh923025.wedge(de-de,WIN.10).gifSo testen Sie die Suche

  1. Wählen Sie auf der Debugger-Symbolleiste in der Dropdownliste neben der Schaltfläche Debugging starten die Option Lokaler Computer aus.
  2. Wählen Sie F5, um das Debuggen zu starten.
  3. Geben Sie in dem im linken Hub-Bereich angezeigten Suchfeld Hello ein, und drücken Sie die EINGABETASTE.

    Auf der Seite mit den Suchergebnissen werden Ergebnisse aus Ihrem Datenmodell angezeigt, die den Suchbegriff enthalten. Die folgende Abbildung zeigt die Seite mit den Suchergebnissen, nachdem Sie im Suchfeld "Hello" eingegeben haben.

    Seite mit Suchergebnissen

  4. Klicken Sie auf eines der Suchergebnisse.
  5. Die Hub-, Grid- oder Split-App öffnet die Elementseite, wobei der ausgewählte Titel am oberen Rand angezeigt wird.

    Mithilfe der Schaltfläche "Zurück" gelangen Sie zurück zur Seite mit den Suchergebnissen.

Verwandte Themen

JavaScript-Projektvorlagen für Windows Store-Apps
JavaScript-Elementvorlagen für Windows Store-Apps
Hinzufügen einer Elementvorlage vom Typ "Vertrag für 'Suche'"

 

 

Anzeigen:
© 2017 Microsoft