Delen via

Suggesties voor automatisch aanvullen en zoeken toevoegen in client-apps

  • Artikel

Search-as-you-type is een veelgebruikte techniek voor het verbeteren van de productiviteit van query's. In Azure AI Search wordt deze ervaring ondersteund via automatisch aanvullen, waarmee een term of woordgroep wordt voltooid op basis van gedeeltelijke invoer (bijvoorbeeld het voltooien van microchip, microscoop, microsoft en andere microovereenkomsten). Een tweede gebruikerservaring is suggesties, die een korte lijst met overeenkomende documenten produceren (bijvoorbeeld het retourneren van boektitels met een id, zodat u een koppeling naar een detailpagina over dat boek kunt maken). Zowel automatisch aanvullen als suggesties worden geprediceerd op een overeenkomst in de index. De service biedt geen automatisch aangevulde query's of suggesties die nul resultaten retourneren.

Ga als volgt te werk om deze ervaringen in Azure AI Search te implementeren:

  • Voeg een suggester toe aan een indexschema.
  • Bouw een query die de API voor automatisch aanvullen of suggesties-API aanroept voor de aanvraag.
  • Voeg een UI-besturingselement toe voor het afhandelen van interacties tussen zoekopdrachten per type in uw client-app. We raden u aan een bestaande JavaScript-bibliotheek te gebruiken voor dit doel.

In Azure AI Search worden automatisch aangevulde query's en voorgestelde resultaten opgehaald uit de zoekindex, uit geselecteerde velden die u bij een suggestie registreert. Een suggestie maakt deel uit van de index en geeft aan welke velden inhoud bieden die een query voltooit, een resultaat voorstelt of beide doet. Wanneer de index wordt gemaakt en geladen, wordt intern een gegevensstructuur voor suggesties gemaakt om voorvoegsels op te slaan die worden gebruikt voor het vergelijken van gedeeltelijke query's. Voor suggesties is het essentieel om geschikte velden te kiezen die uniek zijn, of in ieder geval niet herhaaldelijk, voor de ervaring. Zie Een suggestie configureren voor meer informatie.

De rest van dit artikel is gericht op query's en clientcode. JavaScript en C# worden gebruikt om belangrijke punten te illustreren. REST API-voorbeelden worden gebruikt om elke bewerking beknopt weer te geven. Zie Zoeken toevoegen aan een website met .NET voor end-to-end-codevoorbeelden.

Een aanvraag instellen

Elementen van een aanvraag bevatten een van de API's voor zoeken als u, een gedeeltelijke query en een suggestie. Het volgende script illustreert onderdelen van een aanvraag met behulp van de REST API voor automatisch aanvullen als voorbeeld.

POST /indexes/myxboxgames/docs/autocomplete?search&api-version=2024-07-01
{
  "search": "minecraf",
  "suggesterName": "sg"
}

De suggesterName parameter geeft u de suggestiebewuste velden die worden gebruikt om termen of suggesties te voltooien. Voor suggesties moet de lijst met velden bestaan uit suggesties die duidelijke keuzes bieden tussen overeenkomende resultaten. Op een site die computerspellen verkoopt, kan het veld de titel van het spel zijn.

De search parameter biedt de gedeeltelijke query, waarbij tekens worden ingevoerd in de queryaanvraag via het besturingselement jQuery Automatisch aanvullen. In het vorige voorbeeld is minecraf een statische illustratie van wat de controle kan doorgeven.

De API's leggen geen minimale lengtevereisten op voor de gedeeltelijke query; het kan zo klein zijn als één teken. JQuery AutoComplete biedt echter een minimale lengte. Een minimum van twee of drie tekens is typisch.

Overeenkomsten bevinden zich aan het begin van een term ergens in de invoertekenreeks. Gezien de snelle bruine vos komen zowel automatisch aanvullen als suggesties overeen met gedeeltelijke versies van de, snelle, bruine of vos , maar niet op gedeeltelijke infix termen zoals rown of ox. Bovendien stelt elke overeenkomst het bereik voor downstream-uitbreidingen in. Een gedeeltelijke query van snelle br-overeenkomsten op snel bruin of snel brood, maar geen bruin of brood op zichzelf zou een overeenkomst zijn tenzij snel* voorafgaat.

API's voor search-as-you-type

Volg deze koppelingen voor de REST- en .NET SDK-referentiepagina's:

Een antwoord structuren

Antwoorden voor automatisch aanvullen en suggesties zijn wat u kunt verwachten voor het patroon: Automatisch aanvullen retourneert een lijst met termen, suggesties retourneren termen plus een document-id, zodat u het document kunt ophalen (gebruik de API voor opzoeken van documenten om het specifieke document voor een detailpagina op te halen).

Antwoorden worden gevormd door de parameters voor de aanvraag:

  • Stel voor automatisch aanvullen de autocompleteMode in om te bepalen of tekstvoltooiing plaatsvindt op een of twee termen.

  • Voor suggesties stelt u $select in om velden met unieke of differentiërende waarden te retourneren, zoals namen en beschrijvingen. Vermijd velden die dubbele waarden bevatten (zoals een categorie of plaats).

De volgende parameters zijn van toepassing op zowel automatisch aanvullen als suggesties, maar zijn meer van toepassing op suggesties, met name wanneer een suggestie meerdere velden bevat.

Parameter Gebruik
searchFields Beperk de query tot specifieke velden.
$filter Criteria voor overeenkomst toepassen op de resultatenset ($filter=Category eq 'ActionAdventure').
$top Beperk de resultaten tot een specifiek getal ($top=5).

Code voor gebruikersinteractie toevoegen

Voor het automatisch invullen van een queryterm of het weghalen van een lijst met overeenkomende koppelingen is code voor gebruikersinteractie vereist, meestal JavaScript, die aanvragen van externe bronnen kan verbruiken, zoals automatisch aanvullen of suggestiequery's voor een Azure Search Cognitive-index.

Hoewel u deze code systeemeigen kunt schrijven, is het eenvoudiger om functies uit de bestaande JavaScript-bibliotheek te gebruiken, zoals een van de volgende opties.

  • De widget Automatisch aanvullen (jQuery UI) wordt weergegeven in het codefragment voor suggesties. U kunt een zoekvak maken en ernaar verwijzen in een JavaScript-functie die gebruikmaakt van de widget voor automatisch aanvullen. Eigenschappen op de widget stellen de bron in (een functie voor automatisch aanvullen of suggesties), minimale lengte van invoertekens voordat er actie wordt ondernomen en plaatsing.

  • De XDSoft AutoComplete-invoegtoepassing wordt weergegeven in het codefragment voor automatisch aanvullen.

  • Suggesties worden weergegeven in de zelfstudie Voor het toevoegen van zoekopdrachten aan websites en het codevoorbeeld.

Gebruik deze bibliotheken in de client om een zoekvak te maken dat ondersteuning biedt voor suggesties en automatisch aanvullen. Invoer die in het zoekvak wordt verzameld, kan vervolgens worden gekoppeld aan suggesties en acties voor automatisch aanvullen in de zoekservice.

Suggesties

In deze sectie wordt u begeleid bij een implementatie van voorgestelde resultaten, te beginnen met de definitie van het zoekvak. Het laat ook zien hoe en script waarmee de eerste JavaScript-bibliotheek voor automatisch aanvullen wordt aangeroepen waarnaar in dit artikel wordt verwezen.

Ervan uitgaande dat de bibliotheek voor automatisch aanvullen van de jQuery-gebruikersinterface en een MVC-project in C# is, kunt u het zoekvak definiëren met behulp van JavaScript in het bestand Index.cshtml . De bibliotheek voegt de interactie tussen zoekopdrachten als u toe aan het zoekvak door asynchrone aanroepen naar de MVC-controller te maken om suggesties op te halen.

In Index.cshtml in de map \Views\Home kan een regel voor het maken van een zoekvak er als volgt uitzien:

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

Dit voorbeeld is een eenvoudig invoertekstvak met een klasse voor stijl, een id waarnaar moet worden verwezen door JavaScript en tijdelijke aanduidingen voor tekst.

Sluit in hetzelfde bestand JavaScript in dat verwijst naar het zoekvak. Met de volgende functie wordt de Suggestie-API aangeroepen, die voorgestelde overeenkomende documenten aanvraagt op basis van gedeeltelijke terminvoer:

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

De source functie voor automatisch aanvullen van de jQuery-gebruikersinterface geeft aan waar de lijst met items moet worden weergegeven onder het zoekvak. Omdat dit project een MVC-project is, wordt de Suggest functie aangeroepen in HomeController.cs die de logica bevat voor het retourneren van querysuggesties. Met deze functie worden ook enkele parameters doorgegeven om markeringen, fuzzy overeenkomsten en term te beheren. Door de JavaScript-API voor automatisch aanvullen wordt de parameter 'term' toegevoegd.

De minLength: 3 aanbevelingen worden alleen weergegeven wanneer er ten minste drie tekens in het zoekvak staan.

Fuzzy overeenkomsten inschakelen

Zoeken bij benadering zorgt ervoor dat u resultaten krijgt te zien op basis van treffers bij benadering, zelfs als de gebruiker een woord in het zoekvak onjuist heeft gespeld. De bewerkingsafstand is 1, wat betekent dat er een maximale discrepantie kan zijn tussen de invoer van de gebruiker en een overeenkomst.

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

Markeringen inschakelen

Markering past de tekenstijl toe op de tekens in het resultaat dat overeenkomt met de invoer. Als de gedeeltelijke invoer bijvoorbeeld micro is, wordt het resultaat weergegeven als micro soft, microscope, enzovoort. Markeren is gebaseerd op de HighlightPreTag en HighlightPostTag parameters die inline zijn gedefinieerd met de Suggest functie.

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

Functie Voorstellen

Als u C# en een MVC-toepassing gebruikt, kunt u in het HomeController.cs bestand in de map Controllers een klasse maken voor voorgestelde resultaten. In .NET is een Suggest functie gebaseerd op de methode SuggestAsync. Zie Azure AI Search gebruiken vanuit een .NET-toepassing voor meer informatie over de .NET SDK.

Met de InitSearch methode maakt u een geverifieerde HTTP-indexclient voor de Azure AI-Search-service. Eigenschappen in de klasse SuggestOptions bepalen welke velden worden doorzocht en geretourneerd in de resultaten, het aantal overeenkomsten en of fuzzy overeenkomsten worden gebruikt.

Voor automatisch aanvullen is fuzzy matching beperkt tot één bewerkingsafstand (één weggelaten of verkeerd geplaatst teken). Fuzzy overeenkomende query's kunnen soms onverwachte resultaten opleveren, afhankelijk van de indexgrootte en hoe deze is gehard.

public async Task<ActionResult> SuggestAsync(bool highlights, bool fuzzy, string term)
{
    InitSearch();

    var options = new SuggestOptions()
    {
        UseFuzzyMatching = fuzzy,
        Size = 8,
    };

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

    // Only one suggester can be specified per index.
    // The suggester for the Hotels index enables autocomplete/suggestions on the HotelName field only.
    // During indexing, HotelNames are indexed in patterns that support autocomplete and suggested results.
    var suggestResult = await _searchClient.SuggestAsync<Hotel>(term, "sg", options).ConfigureAwait(false);

    // Convert the suggest query results to a list that can be displayed in the client.
    List<string> suggestions = suggestResult.Value.Results.Select(x => x.Text).ToList();

    // Return the list of suggestions.
    return new JsonResult(suggestions);
}

De SuggestAsync functie gebruikt twee parameters die bepalen of hit-markeringen worden geretourneerd of fuzzy overeenkomsten worden gebruikt naast de invoer van de zoekterm. Maximaal acht overeenkomsten kunnen worden opgenomen in voorgestelde resultaten. De methode maakt een SuggestOptions-object, dat vervolgens wordt doorgegeven aan de Suggest-API. Het resultaat wordt vervolgens geconverteerd naar JSON, zodat deze in de client kan worden weergegeven.

Automatisch aanvullen

Tot nu toe is de UX-code voor zoeken gecentreerd op suggesties. In het volgende codeblok wordt automatisch aanvullen weergegeven met behulp van de functie XDSoft jQuery UI Automatisch aanvullen, waarbij een aanvraag voor automatisch aanvullen van Azure AI Search wordt doorgegeven. Net als bij de suggesties gaat in een C#-toepassing code die ondersteuning biedt voor gebruikersinteractie in index.cshtml.

$(function () {
    // using modified jQuery Autocomplete plugin v1.2.8 https://xdsoft.net/jqplugins/autocomplete/
    // $.autocomplete -> $.autocompleteInline
    $("#searchbox1").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
    $("#searchbox1").keydown(function (evt) {
        if (evt.keyCode === 9 /* TAB */ && currentSuggestion2) {
            $("#searchbox1").val(currentSuggestion2);
            return false;
        } else if (evt.keyCode === 27 /* ESC */) {
            currentSuggestion2 = "";
            $("#searchbox1").val("");
        }
    });
});

Functie Automatisch aanvullen

Automatisch aanvullen is gebaseerd op de methode AutoAanvullenAsync. Net als bij suggesties zou dit codeblok in het HomeController.cs-bestand gaan.

public async Task<ActionResult> AutoCompleteAsync(string term)
{
    InitSearch();

    // Setup the autocomplete parameters.
    var ap = new AutocompleteOptions()
    {
        Mode = AutocompleteMode.OneTermWithContext,
        Size = 6
    };
    var autocompleteResult = await _searchClient.AutocompleteAsync(term, "sg", ap).ConfigureAwait(false);

    // Convert the autocompleteResult results to a list that can be displayed in the client.
    List<string> autocomplete = autocompleteResult.Value.Results.Select(x => x.Text).ToList();

    return new JsonResult(autocomplete);
}

De functie Automatisch aanvullen gebruikt de invoer van de zoekterm. Met de methode wordt een Object AutoCompleteParameters gemaakt. Het resultaat wordt vervolgens geconverteerd naar JSON, zodat deze in de client kan worden weergegeven.

Volgende stap

In de volgende zelfstudie ziet u een zoek-naar-u-type-ervaring.

Zoeken toevoegen aan een website (C#)