Lägga till förslag på automatisk komplettering och sökning i klientappar

Artikel
02/28/2024

Sök som du-typ är en vanlig teknik för att förbättra frågeproduktiviteten. I Azure AI Search stöds den här upplevelsen via automatisk komplettering, som avslutar en term eller fras baserat på partiella indata (slutföra "mikro" med "mikrochip", "mikroskop", "microsoft" och andra mikromatchningar). En andra användarupplevelse är förslag eller en kort lista över matchande dokument (returnera boktitlar med ett ID så att du kan länka till en informationssida om den boken). Både automatisk komplettering och förslag bygger på en matchning i indexet. Tjänsten erbjuder inte automatiskt kompletterade frågor eller förslag som returnerar noll resultat.

Så här implementerar du dessa upplevelser i Azure AI Search:

Lägg till ett suggester i ett indexschema.
Skapa en fråga som anropar API:et Komplettera automatiskt eller Förslag på begäran.
Lägg till en användargränssnittskontroll för att hantera interaktioner av typen search-as-you i klientappen. Vi rekommenderar att du använder ett befintligt JavaScript-bibliotek för detta ändamål.

I Azure AI Search hämtas automatiskt kompletterade frågor och föreslagna resultat från sökindexet från valda fält som du registrerar med en förslagsbärare. En förslagsställare är en del av indexet och anger vilka fält som tillhandahåller innehåll som antingen slutför en fråga, föreslår ett resultat eller gör båda. När indexet skapas och läses in skapas en förslagsdatastruktur internt för att lagra prefix som används för matchning på partiella frågor. För förslag är det viktigt att välja lämpliga fält som är unika, eller åtminstone inte repetitiva, för upplevelsen. Mer information finns i Skapa en förslagsspelare.

Resten av den här artikeln fokuserar på frågor och klientkod. Den använder JavaScript och C# för att illustrera viktiga punkter. REST API-exempel används för att kortfattat presentera varje åtgärd. Information om kodexempel från slutpunkt till slutpunkt finns i Nästa steg.

Konfigurera en begäran

Element i en begäran inkluderar en av API:erna av typen search-as-you, en partiell fråga och en förslagsställare. Följande skript illustrerar komponenter i en begäran med hjälp av REST API för automatisk komplettering som exempel.

POST /indexes/myxboxgames/docs/autocomplete?search&api-version=2020-06-30
{
  "search": "minecraf",
  "suggesterName": "sg"
}

Med "suggesterName" får du de förslagsmedvetna fält som används för att slutföra termer eller förslag. För förslag i synnerhet bör fältlistan bestå av de som erbjuder tydliga val bland matchande resultat. På en webbplats som säljer datorspel kan fältet vara speltiteln.

Parametern "search" innehåller den partiella frågan, där tecken matas till frågebegäran via kontrollen jQuery Autocomplete. I exemplet ovan är "minecraf" en statisk bild av vad kontrollen kan skicka in.

API:erna ställer inte krav på minsta längd på den partiella frågan. det kan vara så lite som ett tecken. JQuery Autocomplete ger dock en minsta längd. Minst två eller tre tecken är typiskt.

Matchningar är i början av en term var som helst i indatasträngen. Med tanke på "den snabba bruna räven" matchar både automatisk komplettering och förslag på partiella versioner av "the", "quick", "brown" eller "fox" men inte på partiella infixtermer som "rown" eller "ox". Dessutom anger varje matchning omfånget för underordnade expansioner. En partiell fråga om "quick br" matchar på "quick brown" eller "quick bread", men varken "brunt" eller "bröd" i sig skulle vara en matchning om inte "snabb" föregår dem.

API:er för search-as-you-type

Följ dessa länkar för REST- och .NET SDK-referenssidorna:

Strukturera ett svar

Svar för automatisk komplettering och förslag är vad du kan förvänta dig för mönstret: Komplettera automatiskt returnerar en lista med termer, Förslag returnerar termer plus ett dokument-ID så att du kan hämta dokumentet (använd API:et för uppslagsdokument för att hämta det specifika dokumentet för en detaljsida).

Svaren formas av parametrarna i begäran:

För Automatisk komplettering anger du autocompleteMode för att avgöra om text har slutförts på en eller två villkor.
För Förslag anger du $select för att returnera fält som innehåller unika eller särskiljande värden, till exempel namn och beskrivning. Undvik fält som innehåller duplicerade värden (till exempel en kategori eller stad).

Följande parametrar gäller för både automatisk komplettering och förslag, men är mer tillämpliga på förslag, särskilt när en förslagsspelare innehåller flera fält.

Parameter	Användning
searchFields	Begränsa frågan till specifika fält.
$filter	Tillämpa matchningsvillkor på resultatuppsättningen (`$filter=Category eq 'ActionAdventure'`).
$top	Begränsa resultatet till ett specifikt tal (`$top=5`).

Lägga till kod för användarinteraktion

För att fylla i en frågeterm automatiskt eller ta bort en lista med matchande länkar krävs användarinteraktionskod, vanligtvis JavaScript, som kan använda begäranden från externa källor, till exempel komplettera automatiskt eller föreslå frågor mot ett Cognitive-index för Azure Search.

Även om du kan skriva den här koden internt är det enklare att använda funktioner från ett befintligt JavaScript-bibliotek, till exempel något av följande.

Widgeten Komplettera automatiskt (jQuery UI) visas i kodfragmentet Förslagskod. Du kan skapa en sökruta och sedan referera till den i en JavaScript-funktion som använder widgeten Komplettera automatiskt. Egenskaper för widgeten anger källan (en funktion för automatisk komplettering eller förslag), minsta längd på indatatecken innan åtgärden vidtas och positionering.
Plugin-programmet För automatisk komplettering av XDSoft visas i kodfragmentet Komplettera automatiskt.
förslag visas i JavaScript-självstudien och kodexemplet.

Använd dessa bibliotek i klienten för att skapa en sökruta som stöder både förslag och automatisk komplettering. Indata som samlas in i sökrutan kan sedan paras ihop med förslag och komplettera automatiskt åtgärder i söktjänsten.

Förslag

I det här avsnittet går vi igenom en implementering av föreslagna resultat, med början i sökrutedefinitionen. Den visar också hur och skript som anropar det första JavaScript-biblioteket för automatisk komplettering som refereras i den här artikeln.

Om du antar jQuery UI Autocomplete-biblioteket och ett MVC-projekt i C#, kan du definiera sökrutan med JavaScript i filen Index.cshtml. Biblioteket lägger till interaktionen search-as-you-type i sökrutan genom att göra asynkrona anrop till MVC-styrenheten för att hämta förslag.

I Index.cshtml under mappen \Views\Home kan en rad för att skapa en sökruta vara följande:

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

Det här exemplet är en enkel textruta med en klass för formatering, ett ID som ska refereras till av JavaScript och platshållartext.

I samma fil bäddar du in JavaScript som refererar till sökrutan. Följande funktion anropar Suggest-API:et, som begär föreslagna matchningsdokument baserat på partiella termindata:

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

source Talar om för funktionen jQuery UI Autocomplete var du vill hämta listan över objekt som ska visas under sökrutan. Eftersom det här projektet är ett MVC-projekt anropas funktionen Föreslå i HomeController.cs som innehåller logiken för att returnera frågeförslag. Den här funktionen skickar också några parametrar för att styra markeringar, fuzzy-matchning och term. JavaScript-API:et för automatisk komplettering lägger till term-parametern.

Säkerställer minLength: 3 att rekommendationer endast visas när det finns minst tre tecken i sökrutan.

Aktivera fuzzy-matchning

Med fuzzy-sökningar kan du få resultat för nära matchningar även om användaren stavar fel på ett ord i sökrutan. Redigeringsavståndet är 1, vilket innebär att det kan finnas en maximal avvikelse på ett tecken mellan användarens indata och en matchning.

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

Aktivera markering

Markeringen tillämpar teckensnittsformatet på tecknen i resultatet som motsvarar indata. Om den partiella inmatningen till exempel är "micro" visas resultatet som mikromjuk, mikroomfångoch så vidare. Markeringen baseras på parametrarna HighlightPreTag och HighlightPostTag, som definieras infogat med funktionen Förslag.

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

Föreslå funktion

Om du använder C# och ett MVC-program är HomeController.cs fil under katalogen Controllers där du kan skapa en klass för föreslagna resultat. I .NET baseras en Suggest-funktion på metoden SuggestAsync. Mer information om .NET SDK finns i Använda Azure AI Search från ett .NET-program.

Metoden InitSearch skapar en autentiserad HTTP-indexklient till Azure AI-tjänsten Search. Egenskaper i klassen SuggestOptions avgör vilka fält som genomsöks och returneras i resultaten, antalet matchningar och om fuzzy-matchning används.

För automatisk komplettering är fuzzy-matchning begränsad till ett redigeringsavstånd (ett utelämnat eller felplacerat tecken). Fuzzy-matchning i frågor för automatisk komplettering kan ibland ge oväntade resultat beroende på indexstorlek och hur den är fragmenterad.

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);
}

Funktionen SuggestAsync tar två parametrar som avgör om träffhöjdpunkter returneras eller fuzzy-matchning används utöver söktermsindata. Upp till åtta matcher kan ingå i föreslagna resultat. Metoden skapar ett SuggestOptions-objekt som sedan skickas till API:et Föreslå. Resultatet konverteras sedan till JSON, så att det kan visas i klienten.

Komplettera automatiskt

Hittills har sök-UX-koden centrerats på förslag. Nästa kodblock visar automatisk komplettering med hjälp av funktionen XDSoft jQuery UI Autocomplete och skickar in en begäran om automatisk komplettering av Azure AI Search. Precis som med förslagen går kod som stöder användarinteraktion i ett C#-program i 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("");
        }
    });
});

Funktionen Komplettera automatiskt

Automatisk komplettering baseras på metoden Komplettera automatisktAsync. Precis som med förslag skulle det här kodblocket gå i filen HomeController.cs .

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);
}

Funktionen Komplettera automatiskt tar indata för sökordet. Metoden skapar ett AutoCompleteParameters-objekt. Resultatet konverteras sedan till JSON, så att det kan visas i klienten.

Nästa steg

Följande självstudie visar en sök-som-du-typ-upplevelse.

Lägga till sökning på en webbplats (JavaScript)

Share via

Lägga till förslag på automatisk komplettering och sökning i klientappar

Konfigurera en begäran

API:er för search-as-you-type

Strukturera ett svar

Lägga till kod för användarinteraktion

Förslag

Aktivera fuzzy-matchning

Aktivera markering

Föreslå funktion

Komplettera automatiskt

Funktionen Komplettera automatiskt

Nästa steg

Ytterligare resurser

Share via

Lägga till förslag på automatisk komplettering och sökning i klientappar

Konfigurera en begäran

API:er för search-as-you-type

Strukturera ett svar

Lägga till kod för användarinteraktion

Förslag

Skapa en sökruta

Aktivera fuzzy-matchning

Aktivera markering

Föreslå funktion

Komplettera automatiskt

Funktionen Komplettera automatiskt

Nästa steg

Ytterligare resurser