Přidání návrhů automatického dokončování a hledání v klientských aplikacích

Článek
03/05/2024

Vyhledávání při psaní je běžnou technikou pro zlepšení produktivity dotazů. Ve službě Azure AI Search je toto prostředí podporováno prostřednictvím automatického dokončování, které dokončí termín nebo frázi na základě částečného vstupu (dokončení "mikro" s "mikročipem", "microchip", "microsoft" a všemi dalšími mikroshodami). Druhým uživatelským prostředím je návrhy nebo krátký seznam odpovídajících dokumentů (vrácení názvů knih s ID, abyste mohli odkazovat na stránku podrobností o této knize). Automatické dokončování i návrhy jsou predikované podle shody v indexu. Služba nenabízí automaticky kompilované dotazy ani návrhy, které vracejí nulové výsledky.

Implementace těchto prostředí ve službě Azure AI Search:

Přidání schématu suggester indexu
Vytvořte dotaz, který v požadavku volá rozhraní API pro automatické dokončování nebo návrhy .
Přidejte ovládací prvek uživatelského rozhraní pro zpracování interakcí s hledáním při psaní v klientské aplikaci. Pro tento účel doporučujeme použít existující javascriptovou knihovnu.

Ve službě Azure AI Search se automaticky kompilované dotazy a navrhované výsledky načtou z indexu vyhledávání z vybraných polí, která zaregistrujete u navrhovače. Navrhovač je součástí indexu a určuje, která pole poskytují obsah, který buď dokončí dotaz, navrhne výsledek nebo obojí. Při vytvoření a načtení indexu se interně vytvoří datová struktura pro návrhy pro ukládání předpon používaných pro párování u částečných dotazů. Pro zkušenosti je nezbytné zvolit vhodná pole, která jsou jedinečná nebo alespoň neopakovatelná. Další informace najdete v tématu Vytvoření navrhovače.

Zbývající část tohoto článku se zaměřuje na dotazy a kód klienta. K ilustraci klíčových bodů používá JavaScript a C#. Příklady rozhraní REST API slouží ke stručné prezentaci jednotlivých operací. Kompletní ukázky kódu najdete v dalších krocích.

Nastavení žádosti

Mezi prvky požadavku patří jedno z rozhraní API pro vyhledávání při psaní, částečný dotaz a navrhovač. Následující skript znázorňuje komponenty požadavku pomocí rozhraní REST API pro automatické dokončování jako příklad.

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

"suggesterName" vám poskytne pole podporující návrhy, která slouží k dokončení termínů nebo návrhů. V případě návrhů by se měl seznam polí skládat z těch, které nabízejí jasné volby mezi odpovídajícími výsledky. Na webu, který prodává počítačové hry, může být pole herní titul.

Parametr "search" poskytuje částečný dotaz, kde se znaky předávají do požadavku dotazu prostřednictvím ovládacího prvku automatického dokončování jQuery. V předchozím příkladu je "minecraf" statickou ilustrací toho, co může ovládací prvek předat.

Rozhraní API neukládají minimální požadavky na délku částečného dotazu; může to být jen jeden znak. JQuery Autocomplete ale poskytuje minimální délku. Typické jsou minimálně dva nebo tři znaky.

Shody jsou na začátku termínu kdekoli ve vstupním řetězci. Vzhledem k tomu, že "rychlá hnědá liška", oba automatické dokončování a návrhy odpovídají částečným verzím "the", "quick", "brown" nebo "fox", ale ne na částečných opravných termínech, jako jsou "rown" nebo "ox". Kromě toho každá shoda nastaví rozsah pro podřízené rozšíření. Částečný dotaz "quick br" se bude shodovat s "rychlým hnědým" nebo "rychlým chlebem", ale ani "hnědý" nebo "chleba" samy o sobě nebudou odpovídat, pokud jim "quick" předchází.

Rozhraní API pro vyhledávání při psaní

Odkazy na rest a .NET SDK najdete na těchto odkazech:

Strukturování odpovědi

Odpovědi pro automatické dokončování a návrhy jsou to, co byste mohli očekávat pro vzor: Automatické dokončování vrátí seznam termínů, návrhy vrátí termíny a ID dokumentu, abyste mohli dokument načíst (pomocí rozhraní API pro vyhledávání dokumentů načíst konkrétní dokument pro stránku podrobností).

Odpovědi jsou tvarovány parametry v požadavku:

Pro automatické dokončování nastavte automatické dokončováníMode , abyste zjistili, jestli se dokončování textu vyskytuje na jednom nebo dvou termínech.
V případě návrhů nastavte $select tak, aby vracela pole obsahující jedinečná nebo různá hodnoty, jako jsou názvy a popisy. Vyhněte se polím, která obsahují duplicitní hodnoty (například kategorie nebo město).

Následující parametry platí pro automatické dokončování i návrhy, ale jsou vhodnější pro návrhy, zejména v případě, že navrhovač obsahuje více polí.

Parametr	Využití
searchFields	Omezte dotaz na konkrétní pole.
$filter	Použití kritérií shody u sady výsledků (`$filter=Category eq 'ActionAdventure'`).
$top	Omezte výsledky na konkrétní číslo (`$top=5`).

Přidání kódu interakce uživatele

Automatické vyplňování termínu dotazu nebo vyřazení seznamu odpovídajících odkazů vyžaduje kód interakce uživatele, obvykle JavaScript, který může využívat požadavky z externích zdrojů, jako jsou automatické dokončování nebo návrhy dotazů na index Služby Azure Search Cognitive.

I když byste tento kód mohli nativně napsat, je jednodušší používat funkce z existující javascriptové knihovny, například jednu z následujících možností.

Widget automatického dokončování (uživatelské rozhraní jQuery) se zobrazí v fragmentu kódu Návrh. Můžete vytvořit vyhledávací pole a pak na něj odkazovat ve funkci JavaScriptu, která používá widget Automatické dokončování. Vlastnosti widgetu nastavují zdroj (funkci automatického dokončování nebo návrhů), minimální délku vstupních znaků před provedením akce a umístění.
Modul plug-in XDSoft Autocomplete se zobrazí v fragmentu kódu automatického dokončování.
Návrhy se zobrazí v kurzu JavaScriptu a v ukázce kódu.

Pomocí těchto knihoven v klientovi vytvořte vyhledávací pole podporující návrhy i automatické dokončování. Vstupy shromážděné do vyhledávacího pole je pak možné spárovat s návrhy a akcemi automatického dokončování ve vyhledávací službě.

Návrhy

Tato část vás provede implementací navrhovaných výsledků počínaje definicí vyhledávacího pole. Ukazuje také, jak a skript, který vyvolá první knihovnu automatického dokončování JavaScriptu, na kterou odkazuje tento článek.

Za předpokladu, že knihovna automatického dokončování uživatelského rozhraní jQuery a projekt MVC v jazyce C# můžete definovat vyhledávací pole pomocí JavaScriptu v souboru Index.cshtml. Knihovna přidá interakci s hledáním při psaní do vyhledávacího pole tak, že provede asynchronní volání kontroleru MVC za účelem načtení návrhů.

V souboru Index.cshtml ve složce \Views\Home může být řádek pro vytvoření vyhledávacího pole následující:

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

Tento příklad je jednoduché vstupní textové pole s třídou pro stylování, ID, na které odkazuje JavaScript a zástupný text.

Do stejného souboru vložte JavaScript, který odkazuje na vyhledávací pole. Následující funkce volá rozhraní API pro návrhy, které požaduje navrhované odpovídající dokumenty na základě částečných vstupů termínů:

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

Říká source funkci automatického dokončování uživatelského rozhraní jQuery, kde získat seznam položek, které se mají zobrazit pod vyhledávacím polem. Vzhledem k tomu, že se jedná o projekt MVC, volá funkci Návrh v HomeController.cs , která obsahuje logiku pro vracení návrhů dotazů. Tato funkce také předává několik parametrů pro řízení zvýraznění, přibližných shod a termínů. Rozhraní JAVAScript API pro automatické dokončování přidá parametr termínu.

Zajišťuje minLength: 3 , aby se doporučení zobrazovala jenom v případech, kdy je ve vyhledávacím poli aspoň tři znaky.

Povolení přibližné shody

Vyhledávání přibližných shod umožňuje získat výsledky na základě blízké shody i v případě, že uživatel ve vyhledávacím poli udělá chybu ve slově. Vzdálenost úprav je 1, což znamená, že mezi uživatelským vstupem a shodou může být maximální nesrovnalost jednoho znaku.

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

Povolení zvýraznění

Zvýraznění použije styl písma na znaky ve výsledku, které odpovídají vstupu. Pokud je například částečný vstup "mikro", výsledek se zobrazí jako mikroměkčí, mikroúsekatd. Zvýraznění je založeno na parametrech HighlightPreTag a HighlightPostTag definovaných přímo pomocí funkce Suggestion.

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

Funkce Suggest

Pokud používáte C# a aplikaci MVC, HomeController.cs soubor v adresáři Controllers je místo, kde můžete vytvořit třídu pro navrhované výsledky. V .NET je funkce Suggest založená na metodě SuggestAsync. Další informace o sadě .NET SDK naleznete v tématu Použití služby Azure AI Search z aplikace .NET.

Tato InitSearch metoda vytvoří ověřeného klienta indexu HTTP pro Search Azure AI. Vlastnosti třídy SuggestOptions určují, která pole jsou prohledána a vrácena ve výsledcích, počet shod a zda je použita přibližná shoda.

U automatického dokončování je přibližné porovnávání omezeno na jednu vzdálenost úprav (jeden vynechaný nebo chybně umístěný znak). Přibližné shody v dotazech automatického dokončování můžou někdy vést k neočekávaným výsledkům v závislosti na velikosti indexu a způsobu horizontálního dělení. Další informace najdete v tématu koncepty dělení a horizontálního dělení.

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

Funkce SuggestAsync přebírá dva parametry, které určují, jestli se kromě vstupu hledaného výrazu použijí výsledky zvýraznění nebo přibližné shody. Do navrhovaných výsledků je možné zahrnout až osm shod. Metoda vytvoří objekt SuggestOptions, který se pak předá rozhraní API Pro návrhy. Výsledek se pak převede do formátu JSON, aby ho bylo možné zobrazit v klientovi.

Automatické dokončování

Zatím se kód uživatelského rozhraní vyhledávání zaměřil na návrhy. Další blok kódu zobrazuje automatické dokončování pomocí funkce automatického dokončování uživatelského rozhraní XDSoft jQuery a předává požadavek na automatické dokončování azure AI Search. Stejně jako u návrhů se v aplikaci jazyka C#, který podporuje interakci uživatelů, dostane do souboru 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("");
        }
    });
});

Funkce Automatické dokončování

Automatické dokončování je založené na metodě AutocompleteAsync. Stejně jako u návrhů by tento blok kódu šel do souboru 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);
}

Funkce automatického dokončování přebírá vstup hledaného termínu. Metoda vytvoří AutoCompleteParameters objektu. Výsledek se pak převede do formátu JSON, aby ho bylo možné zobrazit v klientovi.

Další kroky

Následující kurz ukazuje prostředí vyhledávání při psaní.

Přidání vyhledávání na web (JavaScript)