Hinzufügen von Vorschlägen oder AutoVervollständigen zur Azure Search-AnwendungAdd suggestions or autocomplete to your Azure Search application

In diesem Artikel erfahren Sie, wie Sie mit Vorschlägen und AutoVervollständigen ein leistungsfähiges Suchfeld erstellen können, das Vorschläge während der Eingabe unterstützt.In this article, learn how to use suggestions and autocomplete to build a powerful search box that supports search-as-you-type behaviors.

  • Vorschläge sind vorgeschlagene Ergebnisse, die während der Eingabe generiert werden, wobei jeder Vorschlag ein einzelnes Ergebnis aus dem Index darstellt, das Ihrer bisherigen Eingabe entspricht.Suggestions are suggested results generated as you type, where each suggestion is a single result from the index that matches what you've typed so far.

  • AutoVervollständigen vervollständigt die von einem Benutzer aktuell eingegebenen Wörter bzw. Ausdrücke.Autocomplete "finishes" the word or phrase that a user is currently typing. Anstatt Ergebnisse zurückzugeben, vervollständigt sie eine Abfrage, die Sie dann ausführen können, um Ergebnisse zurückzugeben.Instead of returning results, it completes a query, which you can then execute to return results. Wie bei Vorschlägen basiert ein vervollständigtes Wort oder ein vervollständigter Ausdruck in einer Abfrage auf einer Übereinstimmung im Index.As with suggestions, a completed word or phrase in a query is predicated on a match in the index. Der Dienst schlägt keine Abfragen vor, die keine Ergebnisse im Index zurückgeben.The service won't offer queries that return zero results in the index.

Sie können den Beispielcode in DotNetHowToAutocomplete herunterladen und ausführen, um diese Features auszuwerten.You can download and run the sample code in DotNetHowToAutocomplete to evaluate these features. Der Beispielcode ist auf einen vordefinierten Index ausgerichtet, der mit NYCJobs-Demodaten gefüllt ist.The sample code targets a prebuilt index populated with NYCJobs demo data. Der NYCJobs-Index enthält ein Vorschlagsfunktionskonstrukt, das eine Voraussetzung für die Verwendung von Vorschlägen oder AutoVervollständigen ist.The NYCJobs index contains a Suggester construct, which is a requirement for using either suggestions or autocomplete. Sie können den in einem Sandboxdienst gehosteten vorbereiteten Index verwenden oder einen eigenen Index mit einem Datenlader in der NYCJobs-Beispiellösung füllen.You can use the prepared index hosted in a sandbox service, or populate your own index using a data loader in the NYCJobs sample solution.

Das Beispiel DotNetHowToAutocomplete zeigt sowohl Vorschläge als auch AutoVervollständigen in C#- und JavaScript-Sprachversionen.The DotNetHowToAutocomplete sample demonstrates both suggestions and autocomplete, in both C# and JavaScript language versions. C#-Entwickler können eine ASP.NET MVC-basierte Anwendung durchlaufen, die das Azure Search .NET SDK verwendet.C# developers can step through an ASP.NET MVC-based application that uses the Azure Search .NET SDK. Die Logik für die automatisch vervollständigten und vorgeschlagenen Abfrageaufrufe finden Sie in der Datei „HomeController.cs“.The logic for making autocomplete and suggested query calls can be found in the HomeController.cs file. JavaScript-Entwickler finden eine entsprechende Abfragelogik in „IndexJavaScript.cshtml“, die direkte Aufrufe an die Azure Search REST-API einschließt.JavaScript developers will find equivalent query logic in IndexJavaScript.cshtml, which includes direct calls to the Azure Search REST API.

Für beide Sprachversionen basiert die Front-End-Benutzeroberfläche auf den Bibliotheken jQuery UI und XDSoft.For both language versions, the front-end user experience is based on the jQuery UI and XDSoft libraries. Mit diesen Bibliotheken wird das Suchfeld erstellt, das sowohl Vorschläge als auch AutoVervollständigen unterstützt.We use these libraries to build the search box supporting both suggestions and autocomplete. Die im Suchfeld gesammelten Eingaben werden mit Vorschlägen und AutoVervollständigen-Aktionen verknüpft, wie sie z. B. in „HomeController.cs“ oder „IndexJavaScript.cshtml“ definiert sind.Inputs collected in the search box are paired with suggestions and autocomplete actions, such as those as defined in HomeController.cs or IndexJavaScript.cshtml.

In dieser Übung werden die folgenden Aufgaben behandelt:This exercise walks you through the following tasks:

  • Implementieren eines Eingabefelds für die Suche in JavaScript und Senden von Anforderungen für vorgeschlagene Übereinstimmungen oder automatisch vervollständigte BegriffeImplement a search input box in JavaScript and issue requests for suggested matches or autocompleted terms
  • Definieren von Vorschlägen und AutoVervollständigen-Aktionen in C# in „HomeController.cs“In C#, define suggestions and autocomplete actions in HomeController.cs
  • Direktes Aufrufen der REST-APIs in JavaScript, um dieselbe Funktionalität bereitzustellenIn JavaScript, call the REST APIs directly to provide the same functionality

VoraussetzungenPrerequisites

Für diese Übung ist ein Azure Search-Dienst optional, da die Lösung einen Live-Sandboxdienst verwendet, der einen vorbereiteten NYCJobs-Demoindex bereitstellt.An Azure Search service is optional for this exercise because the solution uses a live sandbox service hosting a prepared NYCJobs demo index. Wenn Sie dieses Beispiel mit einem eigenen Suchdienst ausführen möchten, finden Sie Anweisungen unter Konfigurieren des NYCJobs-Indexes.If you want to run this example on your own search service, see Configure NYC Jobs index for instructions.

Das Beispiel ist ausführlich und umfasst Vorschläge, AutoVervollständigen, Facettennavigation und clientseitigen Cachedienst.The sample is comprehensive, covering suggestions, autocomplete, faceted navigation, and client-side caching. Lesen Sie die Infodatei und die Kommentare, um eine vollständige Beschreibung des Beispiels zu erhalten.Review the readme and comments for a full description of what the sample offers.

Ausführen des BeispielsRun the sample

  1. Öffnen Sie AutocompleteTutorial.sln in Visual Studio.Open AutocompleteTutorial.sln in Visual Studio. Die Lösung enthält ein ASP.NET MVC-Projekt mit einer Verbindung mit dem NYCJobs-Demoindex.The solution contains an ASP.NET MVC project with a connection to the NYC Jobs demo index.

  2. Drücken Sie die Taste F5, um das Projekt auszuführen, und laden Sie die Seite in einen Browser Ihrer Wahl.Press F5 to run the project and load the page in your browser of choice.

Im oberen Bereich wird Ihnen eine Option zur Auswahl von C# oder JavaScript angezeigt.At the top, you'll see an option to select C# or JavaScript. Die Option C# wird über den Browser im HomeController aufgerufen und verwendet das .NET SDK von Azure Search zum Abrufen von Ergebnissen.The C# option calls into the HomeController from the browser and uses the Azure Search .NET SDK to retrieve results.

Die Option JavaScript ruft die REST-API für Azure Search direkt über den Browser auf.The JavaScript option calls the Azure Search REST API directly from the browser. Diese Option erzielt eine deutlich bessere Leistung, da der Controller aus dem Flow herausgenommen wird.This option will typically have noticeably better performance since it takes the controller out of the flow. Sie können die Option auswählen, die Ihren Anforderungen und Sprachpräferenzen entspricht.You can choose the option that suits your needs and language preferences. Auf der Seite gibt es mehrere Beispiele zur automatischen Vervollständigung mit einer entsprechenden Anleitung.There are several autocomplete examples on the page with some guidance for each. Jedes Beispiel enthält empfohlenen Beispieltext, den Sie ausprobieren können.Each example has some recommended sample text you can try.

Versuchen Sie, in jedes Suchfeld einige Buchstaben einzugeben, um zu sehen, was geschieht.Try typing in a few letters in each search box to see what happens.

Sowohl für die C#- als auch für die JavaScript-Version ist die Implementierung der Suchfelder identisch.For both C# and JavaScript versions, the search box implementation is exactly the same.

Öffnen Sie die Datei Index.cshtml unter dem Ordner „\Views\Home“, um den Code anzuzeigen:Open the Index.cshtml file under the folder \Views\Home to view the code:

<input class="searchBox" type="text" id="example1a" placeholder="search">

Dieses Beispiel umfasst ein einfaches Feld für die Texteingabe mit einer Klasse für das Format, einer von JavaScript referenzierten ID und Platzhaltertext.This example is a simple input text box with a class for styling, an ID to be referenced by JavaScript, and placeholder text. Das Besondere ist im eingebetteten JavaScript zu finden.The magic is in the embedded JavaScript.

Im C#-Sprachbeispiel wird in der Datei „Index.cshtml“ JavaScript verwendet, um die Bibliothek jQuery UI AutoVervollständigen nutzen zu können.The C# language sample uses JavaScript in Index.cshtml to leverage the jQuery UI Autocomplete library. Diese Bibliothek fügt die Funktion der automatischen Vervollständigung zum Suchfeld hinzu, indem im MVC-Controller asynchrone Aufrufe zum Abrufen von Vorschlägen durchgeführt werden.This library adds the autocomplete experience to the search box by making asynchronous calls to the MVC controller to retrieve suggestions. Die JavaScript-Sprachversion befindet sich in „IndexJavaScript.cshtml“.The JavaScript language version is in IndexJavaScript.cshtml. Sie enthält das folgende Skript für die Suchleiste sowie REST API-Aufrufe für Azure Search.It includes the script below for the search bar, as well as REST API calls to Azure Search.

Betrachten wir den JavaScript-Code für das erste Beispiel, das die Funktion „jQuery UI AutoVervollständigen“ aufruft und eine Anforderung für Vorschläge übergibt:Let's look at the JavaScript code for the first example, which calls jQuery UI Autocomplete function, passing in a request for suggestions:

$(function () {
    $("#example1a").autocomplete({
        source: "/home/suggest?highlights=false&fuzzy=false&",
        minLength: 3,
        position: {
            my: "left top",
            at: "left-23 bottom+10"
        }
    });
});

Der obige Code wird im Browser beim Laden der Seite ausgeführt, um die jQuery UI zur automatische Vervollständigung für das Eingabefeld „example1a“ zu konfigurieren.The above code runs in the browser on page load to configure jQuery UI autocomplete for the "example1a" input box. minLength: 3 stellt sicher, dass Empfehlungen nur angezeigt werden, wenn mindestens drei Zeichen in das Suchfeld eingegeben wurden.minLength: 3 ensures that recommendations will only be shown when there are at least three characters in the search box. Der Quellwert ist wichtig:The source value is important:

source: "/home/suggest?highlights=false&fuzzy=false&",

Die obige Zeile teilt der Funktion „jQuery UI AutoVervollständigen“ mit, wo die Liste der Elemente abgerufen werden kann, die unter dem Suchfeld angezeigt werden sollen.The above line tells the jQuery UI Autocomplete function where to get the list of items to show under the search box. Da es sich um ein MVC-Projekt handelt, ruft es die Vorschlagsfunktion in „HomeController.cs“ auf, die die Logik für die Rückgabe der Abfragevorschläge enthält (der nächste Abschnitt enthält weitere Informationen zur Vorschlagsfunktion).Since this project is an MVC project, it calls the Suggest function in HomeController.cs that contains the logic for returning query suggestions (more about Suggest in the next section). Diese Funktion übergibt auch einige Parameter zur Steuerung von Hervorhebungen, für die Fuzzyübereinstimmung und für Benennungen.This function also passes a few parameters to control highlights, fuzzy matching, and term. Die JavaScript-API zur automatischen Vervollständigung fügt den Parameter für Begriffe hinzu.The autocomplete JavaScript API adds the term parameter.

Erweitern des Beispiels zur Unterstützung von FuzzyübereinstimmungenExtending the sample to support fuzzy matching

Mit der Fuzzysuche können Sie Ergebnisse basierend auf nahen Übereinstimmungen abrufen, auch wenn der Benutzer ein Wort im Suchfeld falsch schreibt.Fuzzy search allows you to get results based on close matches even if the user misspells a word in the search box. Obwohl nicht erforderlich, verbessert es die Stabilität eines Typeahead-Erlebnisses erheblich.While not required, it significantly improves the robustness of a typeahead experience. Lassen Sie uns dies ausprobieren, indem wir die Quellzeile ändern, um die Fuzzyübereinstimmung zu aktivieren.Let's try this out by changing the source line to enable fuzzy matching.

Ändern Sie die folgende Zeile:Change the following line from this:

source: "/home/suggest?highlights=false&fuzzy=false&",

Und zwar in diesen Code:to this:

source: "/home/suggest?highlights=false&fuzzy=true&",

Starten Sie die Anwendung durch Drücken der Taste F5.Launch the application by pressing F5.

Geben Sie ein Wort wie z.B. „execative“ ein, und beachten Sie, wie Ergebnisse für „executive“ zurückgegeben werden, auch wenn diese nicht genau mit den von Ihnen eingegebenen Buchstaben übereinstimmen.Try typing something like "execative" and notice how results come back for "executive", even though they are not an exact match to the letters you typed.

Unterstützung von jQuery-AutoVervollständigen durch Azure Search-AutoVervollständigenjQuery Autocomplete backed by Azure Search autocomplete

Bisher wurde der UX-Code der Suche auf die Vorschläge ausgerichtet.So far, the search UX code has been centered on the suggestions. Der nächste Codeblock zeigt die Funktion jQuery UI AutoVervollständigen (Zeile 91 in „index.cshtml“), die eine Anforderung für Azure Search-AutoVervollständigen übergibt:The next code block shows the jQuery UI Autocomplete function (line 91 in index.cshtml), passing in a request for Azure Search autocomplete:

$(function () {
    // using modified jQuery Autocomplete plugin v1.2.6 https://xdsoft.net/jqplugins/autocomplete/
    // $.autocomplete -> $.autocompleteInline
    $("#example2").autocompleteInline({
        appendMethod: "replace",
        source: [
            function (text, add) {
                if (!text) {
                    return;
                }

                $.getJSON("/home/autocomplete?term=" + text, function (data) {
                    if (data && data.length > 0) {
                        currentSuggestion2 = data[0];
                        add(data);
                    }
                });
            }
        ]
    });

    // complete on TAB and clear on ESC
    $("#example2").keydown(function (evt) {
        if (evt.keyCode === 9 /* TAB */ && currentSuggestion2) {
            $("#example2").val(currentSuggestion2);
            return false;
        } else if (evt.keyCode === 27 /* ESC */) {
            currentSuggestion2 = "";
            $("#example2").val("");
        }
    });
});

C#-BeispielC# example

Nachdem wird den JavaScript-Code für die Webseite überprüft haben, schauen wir uns nun den serverseitigen C#-Controllercode an, der die Vorschläge tatsächlich über das .NET SDK von Azure Search abruft.Now that we have reviewed the JavaScript code for the web page, let's look at the C# server-side controller code that actually retrieves the suggested matches using the Azure Search .NET SDK.

Öffnen Sie die Datei HomeController.cs im Verzeichnis „Controllers“.Open the HomeController.cs file under the Controllers directory.

Zunächst bemerken Sie möglicherweise im oberen Bereich der Klasse eine Methode mit dem Namen InitSearch.The first thing you might notice is a method at the top of the class called InitSearch. Mit dieser Methode wird für den Azure Search-Dienst ein authentifizierter Client für den HTTP-Index erstellt.This method creates an authenticated HTTP index client to the Azure Search service. Weitere Informationen finden Sie unter Verwenden von Azure Search aus einer .NET-Anwendung.For more information, see How to use Azure Search from a .NET Application.

Beachten Sie in Zeile 41 die Vorschlagsfunktion.On line 41, notice the Suggest function. Sie basiert auf der DocumentsOperationsExtensions.Suggest-Methode.It is based on the DocumentsOperationsExtensions.Suggest method.

public ActionResult Suggest(bool highlights, bool fuzzy, string term)
{
    InitSearch();

    // Call suggest API and return results
    SuggestParameters sp = new SuggestParameters()
    {
        UseFuzzyMatching = fuzzy,
        Top = 5
    };

    if (highlights)
    {
        sp.HighlightPreTag = "<b>";
        sp.HighlightPostTag = "</b>";
    }

    DocumentSuggestResult resp = _indexClient.Documents.Suggest(term, "sg", sp);

    // Convert the suggest query results to a list that can be displayed in the client.
    List<string> suggestions = resp.Results.Select(x => x.Text).ToList();
    return new JsonResult
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = suggestions
    };
}

Die Funktion „Suggest“ (Vorschlagen) verwendet zwei Parameter, die bestimmen, ob Treffermarkierungen zurückgegeben werden sollen oder ob zusätzlich zur Eingabe des Suchbegriffs die Fuzzyübereinstimmung verwendet werden soll.The Suggest function takes two parameters that determine whether hit highlights are returned or fuzzy matching is used in addition to the search term input. Die Methode erstellt das Objekt SuggestParameters, das anschließend an die Suggest-API übergeben wird.The method creates a SuggestParameters object, which is then passed to the Suggest API. Das Ergebnis wird anschließend in JSON konvertiert, damit es im Client angezeigt werden kann.The result is then converted to JSON so it can be shown in the client.

Beachten Sie in Zeile 69 die Funktion „AutoVervollständigen“.On line 69, notice the Autocomplete function. Sie basiert auf der DocumentsOperationsExtensions.Autocomplete-Methode.It is based on the DocumentsOperationsExtensions.Autocomplete method.

public ActionResult AutoComplete(string term)
{
    InitSearch();
    //Call autocomplete API and return results
    AutocompleteParameters ap = new AutocompleteParameters()
    {
        AutocompleteMode = AutocompleteMode.OneTermWithContext,
        UseFuzzyMatching = false,
        Top = 5
    };
    AutocompleteResult autocompleteResult = _indexClient.Documents.Autocomplete(term, "sg", ap);

    // Conver the Suggest results to a list that can be displayed in the client.
    List<string> autocomplete = autocompleteResult.Results.Select(x => x.Text).ToList();
    return new JsonResult
    {
        JsonRequestBehavior = JsonRequestBehavior.AllowGet,
        Data = autocomplete
    };
}

Die Funktion „AutoVervollständigen“ übernimmt die Eingabe des Suchbegriffs.The Autocomplete function takes the search term input. Die Methode erstellt ein AutoCompleteParameters-Objekt.The method creates an AutoCompleteParameters object. Das Ergebnis wird anschließend in JSON konvertiert, damit es im Client angezeigt werden kann.The result is then converted to JSON so it can be shown in the client.

(Optional) Fügen Sie am Anfang der Funktion „Suggest“ (Vorschlagen) einen Breakpoint hinzu und durchlaufen Sie den Code schrittweise.(Optional) Add a breakpoint to the start of the Suggest function and step through the code. Beachten Sie die vom SDK zurückgegebene Antwort und wie diese in das von der Methode zurückgegebene Ergebnis konvertiert wird.Notice the response returned by the SDK and how it is converted to the result returned from the method.

Die anderen Beispiele auf der Seite folgen beim Hinzufügen von Treffermarkierungen und bei Facets zur Unterstützung des clientseitigen Zwischenspeicherns der Ergebnisse der automatischen Vervollständigung dem gleichen Muster.The other examples on the page follow the same pattern to add hit highlighting and facets to support client-side caching of the autocomplete results. Überprüfen Sie alle Beispiele, um zu verstehen, wie sie funktionieren und wie Sie diese in Ihrer Suchumgebung nutzen können.Review each of these to understand how they work and how to leverage them in your search experience.

JavaScript-BeispielJavaScript example

Eine JavaScript-Implementierung von AutoVervollständigen und Vorschlägen ruft die REST-API auf und verwendet dabei einen URI als Quelle, um den Index und den Vorgang anzugeben.A Javascript implementation of autocomplete and suggestions calls the REST API, using a URI as the source to specify the index and operation.

Öffnen Sie zur Überprüfung der JavaScript-Implementierung IndexJavaScript.cshtml.To review the JavaScript implementation, open IndexJavaScript.cshtml. Beachten Sie, dass die Funktion jQuery UI AutoVervollständigen auch für das Suchfeld verwendet wird, um Suchbegriffseingaben zu sammeln und asynchrone Anrufe an Azure Search zu starten, um vorgeschlagene Übereinstimmungen oder vervollständigte Begriffe abzurufen.Notice that the jQuery UI Autocomplete function is also used for the search box, collecting search term inputs and making asynchronous calls to Azure Search to retrieve suggested matches or completed terms.

Schauen Sie sich den JavaScript-Code im ersten Beispiel an:Let's look at the JavaScript code for the first example:

$(function () {
    $("#example1a").autocomplete({
        source: function (request, response) {
        $.ajax({
            type: "POST",
            url: suggestUri,
            dataType: "json",
            headers: {
                "api-key": searchServiceApiKey,
                "Content-Type": "application/json"
            },
            data: JSON.stringify({
                top: 5,
                fuzzy: false,
                suggesterName: "sg",
                search: request.term
            }),
                success: function (data) {
                    if (data.value && data.value.length > 0) {
                        response(data.value.map(x => x["@@search.text"]));
                    }
                }
            });
        },
        minLength: 3,
        position: {
            my: "left top",
            at: "left-23 bottom+10"
        }
    });
});

Wenn Sie dieses Beispiel mit dem Beispiel oben vergleichen, in dem der Home-Controller aufgerufen wird, werden Sie einige Ähnlichkeiten feststellen.If you compare this example to the example above that calls the Home controller, you'll notice several similarities. Die Konfiguration für die automatische Vervollständigung bei minLength und position ist identisch.The autocomplete configuration for minLength and position are exactly the same.

Die wesentliche Änderung ist in der Quelle zu finden.The significant change here is the source. Statt die Suggest-Methode im Home-Controller aufzurufen, wird in einer JavaScript-Funktion eine REST-Anforderung erstellt und mit AJAX ausgeführt.Instead of calling the Suggest method in the home controller, a REST request is created in a JavaScript function and executed using Ajax. Anschließend wird die Antwort als „Erfolgreich“ verarbeitet und als Quelle verwendet.The response is then processed in "success" and used as the source.

REST-Aufrufe verwenden URIs zur Angabe, ob ein API-Aufruf für AutoVervollständigen oder Vorschläge ausgeführt wird.REST calls use URIs to specify whether an Autocomplete or Suggestions API call is being made. Die folgenden URIs befinden sich in den Zeilen 9 und 10.The following URIs are on lines 9 and 10, respectively.

var suggestUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/suggest?api-version=" + apiVersion;
var autocompleteUri = "https://" + searchServiceName + ".search.windows.net/indexes/" + indexName + "/docs/autocomplete?api-version=" + apiVersion;

In Zeile 148 befindet sich ein Skript, das den autocompleteUri aufruft. Der erste Anruf von suggestUri befindet sich in Zeile 39.The first call to suggestUri is on line 39.

Hinweis

Das Ausführen von REST-Aufrufen an den Dienst in JavaScript wird hier als praktische Veranschaulichung der REST-API bereitgestellt, sollte aber nicht als bewährte Methode oder Empfehlung verstanden werden.Making REST calls to the service in JavaScript is offered here as a convenient demonstration of the REST API, but should not be construed as a best practice or recommendation. Die Einbeziehung eines API-Schlüssels und Endpunkts in ein Skript öffnet Ihren Dienst für Denial-of-Service-Angriffe für jeden, der diese Werte aus dem Skript lesen kann.The inclusion of an API key and endpoint in a script opens your service up to denial of service attacks to anyone who can read those values off the script. Während es sicher ist, JavaScript für Lernzwecke zu verwenden, z. B. für Indizes, die für den kostenfreien Dienst gehostet werden, empfehlen wir die Verwendung von Java oder C# für Indizierungs- und Abfrageoperationen im Produktionscode.While its safe to use JavaScript for learning purposes, perhaps on indexes hosted on the free service, we recommend using Java or C# for indexing and query operations in production code.

Konfigurieren von NYCJobs zum Ausführen für Ihren DienstConfigure NYCJobs to run on your service

Bisher haben Sie den gehosteten NYCJobs-Demoindex verwendet.Until now, you've been using the hosted NYCJobs demo index. Wenn Sie die vollständige Transparenz des gesamten Codes wünschen, einschließlich des Index, befolgen Sie diese Anweisungen, um den Index in Ihrem eigenen Suchdienst zu erstellen und zu laden.If you want full visibility into all of the code, including the index, follow these instructions to create and load the index in your own search service.

  1. Erstellen Sie einen Azure Search-Dienst, oder suchen Sie in Ihrem aktuellen Abonnement nach einem vorhandenen Dienst.Create an Azure Search service or find an existing service under your current subscription. In diesem Beispiel können Sie einen kostenlosen Dienst verwenden.You can use a free service for this example.

    Hinweis

    Bei Verwendung des kostenlosen Azure Search-Diensts gilt eine Obergrenze von drei Indizes.If you are using the free Azure Search service, you are limited to three indexes. Der Datenlader NYCJobs erstellt zwei Indizes.The NYCJobs data loader creates two indexes. Vergewissern Sie sich, dass Ihr Dienst über genügend freie Kapazität für die neuen Indizes verfügt.Make sure you have room on your service to accept the new indexes.

  2. Laden Sie den NYCJobs-Beispielcode herunter.Download NYCJobs sample code.

  3. Öffnen Sie in Visual Studio im Ordner „DataLoader“ des NYCJobs-Beispielcodes die Datei DataLoader.sln.In the DataLoader folder of the NYCJobs sample code, open DataLoader.sln in Visual Studio.

  4. Fügen Sie die Verbindungsinformationen für Ihren Azure Search-Dienst hinzu.Add the connection information for your Azure Search service. Öffnen Sie die Datei „App.config“ im DataLoader-Projekt, und ändern Sie die App-Einstellungen für „TargetSearchServiceName“ und „TargetSearchServiceApiKey“, um Ihren Azure Search-Dienst und Ihren API-Schlüssel für den Azure Search-Dienst widerzuspiegeln.Open the App.config within the DataLoader project and change the TargetSearchServiceName and TargetSearchServiceApiKey appSettings to reflect your Azure Search service and Azure Search Service API Key. Diese Informationen finden Sie im Azure-Portal.This information can be found in the Azure portal.

  5. Drücken Sie F5, um die Anwendung zu starten, erstellen Sie zwei Indizes und importieren Sie die NYCJob-Beispieldaten.Press F5 to launch the application, creating two indexes and importing the NYCJob sample data.

  6. Öffnen Sie AutocompleteTutorial.sln, und bearbeiten Sie die Web.config im Projekt AutocompleteTutorial.Open AutocompleteTutorial.sln and edit the Web.config in the AutocompleteTutorial project. Ändern Sie die Werte „SearchServiceName“ und „SearchServiceApiKey“ in Werte, die für Ihren Suchdienst gültig sind.Change the SearchServiceName and SearchServiceApiKey values to values that are valid for your search service.

  7. Drücken Sie die Taste F5, um die Anwendung auszuführen.Press F5 to run the application. Die Beispiel-Web-App wird im Standardbrowser geöffnet.The sample web app opens in the default browser. Die Benutzeroberfläche ist identisch mit der Sandboxversion, nur der Index und die Daten werden auf Ihrem Dienst gehostet.The experience is identical to the sandbox version, only the index and data are hosted on your service.

Nächste SchritteNext steps

Dieses Beispiel veranschaulicht die grundlegenden Schritte zum Erstellen eines Suchfelds, das die automatische Vervollständigung und Vorschläge unterstützt.This example demonstrates the basic steps for building a search box that supports autocomplete and suggestions. Sie haben gesehen, wie Sie eine ASP.NET MVC-Anwendung erstellen und mit dem .NET SDK oder der REST-API für Azure Search Vorschläge abrufen können.You saw how you could build an ASP.NET MVC application and use either the Azure Search .NET SDK or REST API to retrieve suggestions.

Im nächsten Schritt versuchen Sie, Vorschläge und AutoVervollständigen in Ihre Suchumgebung zu integrieren.As a next step, trying integrating suggestions and autocomplete into your search experience. Die folgenden Referenzartikel sollten dabei helfen.The following reference articles should help.