Automatikus kiegészítési és keresési javaslatok hozzáadása az ügyfélalkalmazásokban

A gépelés közbeni keresés egy gyakori technika a lekérdezési hatékonyság javítására. Az Azure AI Keresésben ez a funkcionalitás az automatikus kiegészítéssel támogatott, amely részleges bemenetre alapozva egészít ki egy kifejezést vagy annak töredékét (például a mikro-t kiegészíti mikrocsippel, mikroszkóppal, microsofttal és más mikro egyezésekkel). A második felhasználói élmény a javaslatok, amelyek egy rövid listát állítanak össze az egyező dokumentumokról (például egy azonosítóval ellátott könyvcímeket ad vissza, hogy hivatkozni tudjon a könyv részletes oldalára). Az automatikus kiegészítés és a javaslatok is az indexben lévő egyezésen alapulnak. A szolgáltatás nem kínál automatikusan befejezett lekérdezéseket vagy javaslatokat, amelyek nulla eredményt adnak vissza.

A következő szolgáltatások megvalósítása az Azure AI Keresésben:

• Adjon hozzá egy suggester-t egy indexsémához.
• Hozzon létre egy lekérdezést, amely meghívja az Automatikus kiegészítés API-t vagy a Suggestions API-t a kéréshez.
• Adjon hozzá egy felhasználói felületi vezérlőt az ügyfélalkalmazásban történő kereséssel kapcsolatos interakciók kezeléséhez. Erre a célra egy meglévő JavaScript-kódtár használatát javasoljuk.

Az Azure AI Keresésben az automatikusan kitöltött lekérdezéseket és a javasolt eredményeket a keresési indexből kérjük le, azokból a kijelölt mezőkből, amelyeket egy "suggester" funkcióval regisztrálunk. A javaslattevő az index része, és meghatározza, hogy mely mezők nyújtanak olyan tartalmat, amely befejez egy lekérdezést, javasol egy eredményt, vagy mindkettőt. Az index létrehozása és betöltésekor a rendszer belsőleg létrehoz egy javaslattevő adatstruktúrát, amely a részleges lekérdezéseken való egyeztetéshez használt előtagokat tárolja. A javaslatokhoz elengedhetetlen a megfelelő mezők kiválasztása, amelyek egyediek, vagy legalábbis nem ismétlődőek. További információ: Javaslattevő konfigurálása.

A cikk további része a lekérdezésekre és az ügyfélkódra összpontosít. JavaScript és C# használatával szemlélteti a főbb pontokat. A REST API-példák az egyes műveletek tömör bemutatására szolgálnak. Teljes kódmintákért lásd Keresés hozzáadása egy webhelyhez a .NET segítségével.

Kérés létrehozása

A kérések elemei közé tartozik az ön által megadott keresési API-k egyike, egy részleges lekérdezés és egy javaslattevő. Az alábbi szkript egy kérés összetevőit mutatja be, példaként az Automatikus kiegészítés REST API-t használva.

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

A suggesterName paraméter megadja a kifejezések vagy javaslatok kiegészítéséhez használt javaslattevői mezőket. Különösen a javaslatok esetében a mezőlistának olyan javaslatokból kell tevődnie, amelyek egyértelmű választási lehetőségeket kínálnak az egyező eredmények között. Egy számítógépes játékokat értékesítő webhelyen a mező lehet a játék címe.

A search paraméter biztosítja a részleges lekérdezést, ahol a jQuery Autocomplete vezérlőn keresztül a rendszer karaktereket táplál a lekérdezési kérelemhez. Az előző példában a minecraf egy statikus illusztrációja annak, hogy mit adhat át a vezérlő.

Az API-k nem írnak elő minimális hosszkövetelményeket a részleges lekérdezésre; lehet akár egy karakter is. A jQuery Autocomplete azonban minimális hosszt biztosít. Legalább két vagy három karakter jellemző.

Az egyezések a kifejezés elején találhatók, bárhol a bemeneti sztringben. Tekintettel a gyors barna rókára, mind az automatikus kiegészítés és a javaslatok egyeznek részleges változatára a, gyors, barna, vagy róka, de nem részleges infix kifejezések, mint rown vagy ox. Ezenkívül minden egyezés meghatározza az alsóbb rétegbeli bővítés hatókörét. A gyors br részleges lekérdezése egyezik a gyors barna vagy a gyors kenyér kifejezésekkel, de sem a barna, sem a kenyér önmagában nem lenne egyezés, hacsak a gyors* nem előzi meg őket.

Gépelés közbeni keresési API-k

Kövesse az alábbi hivatkozásokat a REST és a .NET SDK referenciaoldalakhoz:

• Javaslatok REST API
• REST API automatikus kiegészítése
• SuggestAsync metódus
• AutocompleteAsync metódus

Válasz strukturálása

Az automatikus kiegészítésre és javaslatokra adott válaszok a minta alapján várhatók: Az automatikus kiegészítés visszaadja a kifejezések listáját, a Javaslatok kifejezéseket és egy dokumentumazonosítót, hogy lekérhesse a dokumentumot (a Dokumentum keresése API-val lekérheti az adott dokumentumot egy részletes laphoz).

A válaszokat a kérelem paraméterei határozzák meg:

• Az automatikus kiegészítéshez állítsa be az automatikus kiegészítésImódot annak meghatározásához, hogy a szövegkiegészítés egy vagy két kifejezésen történik-e.

• Javaslatok esetén állítsa be a $select olyan mezők visszaadására, amelyek egyedi vagy megkülönböztető értékeket, például neveket és leírásokat tartalmaznak. Kerülje az ismétlődő értékeket (például kategória vagy város) tartalmazó mezőket.

Az alábbi paraméterek az automatikus kiegészítésre és a javaslatokra is érvényesek, de jobban alkalmazhatók a javaslatokra, különösen akkor, ha egy javaslattevő több mezőt is tartalmaz.

Felhasználói beavatkozási kód hozzáadása

A lekérdezési kifejezés automatikus kitöltéséhez vagy az egyező hivatkozások listájának eltávolításához olyan felhasználói interakciós kódra van szükség, amely általában JavaScript, amely felhasználhatja a külső forrásokból érkező kéréseket, például automatikus kiegészítést vagy javaslatlekérdezéseket egy Azure Search Cognitive-indexen.

Bár ezt a kódot natív módon is megírhatja, a meglévő JavaScript-kódtárból egyszerűbben használhat függvényeket, például az alábbiak egyikét.

• Az automatikus kiegészítési widget (jQuery UI) megjelenik a javaslatkód-kódrészletben. Létrehozhat egy keresőmezőt, majd hivatkozhat rá egy JavaScript-függvényben, amely az automatikus kiegészítési widgetet használja. A vezérlő tulajdonságai beállítják a forrást (automatikus kiegészítés vagy javaslatfüggvény), a művelet végrehajtása előtt a bemeneti karakterek minimális hosszát és a helymeghatározást.

• Az XDSoft Automatikus kiegészítés beépülő modul megjelenik az automatikus kiegészítés kódrészletében.

• Javaslatok jelennek meg a Keresés hozzáadása webhelyekhez oktatóanyagban és a kódmintában.

Az ügyfél ezen kódtáraival létrehozhat egy olyan keresőmezőt, amely támogatja a javaslatokat és az automatikus kiegészítést is. A keresőmezőben gyűjtött bemenetek ezután párosíthatók javaslatokkal és automatikus kiegészítési műveletekkel a keresési szolgáltatásban.

Javaslatok

Ez a szakasz végigvezeti a javasolt eredmények megvalósításán, kezdve a keresőmező definíciójával. Azt is bemutatja, hogyan és hogyan hívja meg a cikkben hivatkozott első JavaScript automatikus kiegészítési kódtárat.

Keresőmező létrehozása

Feltételezve, hogy a jQuery UI Autocomplete könyvtár elérhető, és egy C#-MVC projekt keretében dolgozunk, a keresőmezőt JavaScript használatával definiálhatja az Index.cshtml fájlban. A kódtár a keresési típus szerinti interakciót hozzáadja a keresőmezőhöz úgy, hogy aszinkron hívásokat intéz az MVC-vezérlőhöz a javaslatok lekéréséhez.

A \Views\Home mappában található Index.cshtml fájlban a keresőmező létrehozásához használt sor a következő lehet:

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

Ez a példa egy egyszerű beviteli szövegdoboz, amelyen egy stílusosztály, egy JavaScript által hivatkozandó azonosító és helyőrző szöveg található.

Ugyanabban a fájlban ágyazza be a keresőmezőre hivatkozó JavaScriptet. Az alábbi függvény meghívja a Javaslat API-t, amely részleges kifejezésbemenetek alapján kéri a javasolt egyező dokumentumok megadását:

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

A source jQuery UI Automatikus kiegészítés függvénye megmondja, honnan szerezze be a keresőmező alatt megjelenítendő elemek listáját. Mivel ez a projekt MVC-projekt, meghívja a Suggest HomeController.cs függvényt, amely tartalmazza a lekérdezési javaslatok visszaadásának logikáját. Ez a függvény néhány paramétert is átad a kiemelések, a homályos egyezés és a kifejezés szabályozásához. Az automatikus kiegészítés JavaScript API-ja hozzáadja a kifejezés paramétert.

Ez minLength: 3 biztosítja, hogy a javaslatok csak akkor jelenjenek meg, ha legalább három karakter szerepel a keresőmezőben.

Homályos egyezés engedélyezése

Az intelligens kereséssel akkor is lekérheti az eredményeket közeli találatok alapján, ha a felhasználó elírt egy szót a keresőmezőben. A szerkesztési távolság 1, ami azt jelenti, hogy egy karakter maximális eltérése lehet a felhasználói bemenet és az egyezés között.

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

Kiemelés engedélyezése

A kiemelés betűstílust alkalmaz az eredményben szereplő karakterekre, amelyek megfelelnek a bemenetnek. Ha például a részleges bemenet mikro, az eredmény így jelenhet meg: mikrosoft, mikroszkóp, és így tovább. A kiemelés a HighlightPreTag és HighlightPostTag paramétereken alapul, amelyek a Suggest függvénnyel inline módon vannak definiálva.

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

Javasolt függvény

Ha C# és MVC-alkalmazást használ, a Vezérlők könyvtárban található HomeController.cs fájlban létrehozhat egy osztályt a javasolt eredményekhez. A .NET-ben egy Suggest függvény a SuggestAsync metóduson alapul. A .NET SDK-val kapcsolatos további információkért lásd : Az Azure AI Keresés használata .NET-alkalmazásból.

A InitSearch metódus létrehoz egy hitelesített HTTP-index klienst az Azure AI Keresés szolgáltatáshoz. A SuggestOptions osztály tulajdonságai határozzák meg, hogy mely mezőket keresik és adják vissza az eredményekben, az egyezések számát, és hogy a rendszer használ-e homályos egyezést.

Az automatikus kiegészítés esetében a pontatlan egyezés egy szerkesztési távolságra korlátozódik (egy kihagyott vagy téves helyű karakterre). Az automatikus kiegészítési lekérdezések homályos egyeztetése néha váratlan eredményeket eredményezhet az index méretétől és a horizontális skálázástól függően.

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

A SuggestAsync függvény két paramétert használ, amelyek meghatározzák, hogy a találatkiemelések visszaadva vannak-e, vagy a keresési kifejezés bemenete mellett homályos egyezést is használnak. Legfeljebb nyolc találat szerepelhet a javasolt eredmények között. A metódus létrehoz egy SuggestOptions objektumot, amelyet aztán átad a Javaslat API-nak. A rendszer az eredményt ezután JSON-kifejezéssé alakítja, hogy meg lehessen jeleníteni az ügyfélnek.

automatikus kiegészítés

A keresési UX-kód eddig javaslatokra összpontosított. A következő kódblokk az automatikus kiegészítést jeleníti meg az XDSoft jQuery UI Automatikus kiegészítés funkcióval, amely az Azure AI Keresés automatikus kiegészítésére vonatkozó kérést adja át. A javaslatokhoz hasonlóan egy C#-alkalmazásban a felhasználói interakciót támogató kód az index.cshtml fájlban található.

$(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("");
        }
    });
});

Automatikus kiegészítés funkció

Az automatikus kiegészítés az AutocompleteAsync metóduson alapul. A javaslatokhoz hasonlóan ez a kódblokk is a HomeController.cs fájlba kerül.

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

Az Automatikus kiegészítés függvény a keresési kifejezés bemenetét használja. A metódus létrehoz egy AutoCompleteParameters objektumot. A rendszer az eredményt ezután JSON-kifejezéssé alakítja, hogy meg lehessen jeleníteni az ügyfélnek.

Következő lépés

Az alábbi oktatóanyag bemutatja az Ön által megadott típusú keresés élményét.