Udostępnij za pośrednictwem

Dodawanie sugestii dotyczących autouzupełniania i wyszukiwania w aplikacjach klienckich

  • Artykuł

Typ wyszukiwania zgodnie z rzeczywistym typem to popularna technika zwiększania produktywności zapytań. W usłudze Azure AI Search to środowisko jest obsługiwane za pomocą autouzupełniania, które kończy termin lub frazę na podstawie częściowych danych wejściowych (na przykład ukończenie mikrochipu, mikroskopu, firmy Microsoft i innych dopasowań mikro). Drugie środowisko użytkownika to sugestie, które tworzy krótką listę pasujących dokumentów (na przykład zwracanie tytułów książek z identyfikatorem, dzięki czemu można połączyć się ze stroną szczegółów dotyczącą tej książki). Zarówno autouzupełnianie, jak i sugestie są poprzedzane dopasowaniem w indeksie. Usługa nie oferuje automatycznie wypełnionych zapytań ani sugestii, które zwracają zero wyników.

Aby zaimplementować te środowiska w usłudze Azure AI Search:

W usłudze Azure AI Search zapytania autouzupełniane i sugerowane wyniki są pobierane z indeksu wyszukiwania z wybranych pól zarejestrowanych za pomocą sugestora. Sugestor jest częścią indeksu i określa, które pola zawierają zawartość, która kończy zapytanie, sugeruje wynik lub oba te pola. Po utworzeniu i załadowaniu indeksu struktura danych sugestora jest tworzona wewnętrznie do przechowywania prefiksów używanych do dopasowywania w zapytaniach częściowych. W przypadku sugestii wybór odpowiednich pól, które są unikatowe lub przynajmniej nie powtarzalne, ma kluczowe znaczenie dla tego środowiska. Aby uzyskać więcej informacji, zobacz Konfigurowanie sugestora.

Pozostała część tego artykułu koncentruje się na zapytaniach i kodzie klienta. Używa on języków JavaScript i C# do zilustrowania kluczowych punktów. Przykłady interfejsu API REST służą do zwięzłego prezentowania każdej operacji. Aby uzyskać kompleksowe przykłady kodu, zobacz Dodawanie wyszukiwania do witryny internetowej przy użyciu platformy .NET.

Konfigurowanie żądania

Elementy żądania obejmują jeden z interfejsów API wyszukiwania zgodnie z rzeczywistym typem, zapytania częściowego i sugestora. Poniższy skrypt ilustruje składniki żądania przy użyciu interfejsu API REST autouzupełniania jako przykładu.

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

Parametr suggesterName udostępnia pola z obsługą sugestora używane do wypełniania terminów lub sugestii. W przypadku sugestii w szczególności lista pól powinna składać się z sugestii, które oferują jasne opcje wśród pasujących wyników. Na stronie, która sprzedaje gry komputerowe, pole może być tytułem gry.

Parametr search udostępnia zapytanie częściowe, w którym znaki są przekazywane do żądania zapytania za pośrednictwem kontrolki Autouzupełniania jQuery. W poprzednim przykładzie funkcja minecraf jest statyczną ilustracją tego, co może przekazać kontrolka.

Interfejsy API nie nakładają minimalnych wymagań dotyczących długości zapytania częściowego; może to być tylko jeden znak. Jednak autouzupełnianie jQuery zapewnia minimalną długość. Typowe jest co najmniej dwa lub trzy znaki.

Dopasowania znajdują się na początku terminu w dowolnym miejscu w ciągu wejściowym. Biorąc pod uwagę szybki brązowy lis, zarówno autouzupełnianie, jak i sugestie pasują do częściowych wersji, szybkie, brązowe lub lis, ale nie na częściowych terminach, takich jak rown lub ox. Ponadto każde dopasowanie określa zakres rozszerzeń podrzędnych. Częściowe zapytanie szybkich dopasowań br na szybki brązowy lub szybki chleb, ale ani brązowy, ani chleb przez siebie nie byłoby meczem, chyba że szybkie* poprzedza je.

Interfejsy API wyszukiwania zgodnie z rzeczywistym typem

Skorzystaj z poniższych linków dla stron referencyjnych interfejsu REST i zestawu .NET SDK:

Struktura odpowiedzi

Odpowiedzi dotyczące autouzupełniania i sugestii są zgodne ze wzorcem: Autouzupełnianie zwraca listę terminów, sugestie zwracają terminy oraz identyfikator dokumentu, aby można było pobrać dokument (użyj interfejsu API wyszukiwania dokumentów, aby pobrać konkretny dokument dla strony szczegółów).

Odpowiedzi są kształtowane przez parametry żądania:

  • W przypadku autouzupełniania ustaw autouzupełnianieMode, aby określić, czy uzupełnianie tekstu występuje na jednym lub dwóch terminach.

  • W przypadku sugestii ustaw $select , aby zwracać pola zawierające unikatowe lub różnicujące wartości, takie jak nazwy i opis. Unikaj pól zawierających zduplikowane wartości (takie jak kategoria lub miasto).

Poniższe parametry mają zastosowanie zarówno do autouzupełniania, jak i sugestii, ale są bardziej odpowiednie do sugestii, zwłaszcza gdy sugestor zawiera wiele pól.

Parametr Użycie
pola wyszukiwania Ogranicz zapytanie do określonych pól.
$filter Zastosuj kryteria dopasowania w zestawie wyników ($filter=Category eq 'ActionAdventure').
$top Ogranicz wyniki do określonej liczby ($top=5).

Dodawanie kodu interakcji użytkownika

Automatyczne wypełnianie terminu zapytania lub upuszczanie listy pasujących linków wymaga kodu interakcji użytkownika, zazwyczaj języka JavaScript, który może korzystać z żądań ze źródeł zewnętrznych, takich jak autouzupełnianie lub zapytania sugestii względem indeksu poznawczego usługi Azure Search.

Mimo że ten kod można napisać natywnie, łatwiej jest używać funkcji z istniejącej biblioteki Języka JavaScript, takiej jak jeden z poniższych.

  • Widżet autouzupełniania (jQuery UI) jest wyświetlany we fragmencie kodu sugestii. Możesz utworzyć pole wyszukiwania, a następnie odwołać się do niego w funkcji JavaScript korzystającej z widżetu autouzupełniania. Właściwości w widżecie ustawiają źródło (funkcję autouzupełniania lub sugestii), minimalną długość znaków wejściowych przed podjęciem akcji i pozycjonowanie.

  • Wtyczka XDSoft Autouzupełnianie jest wyświetlana w fragmencie kodu autouzupełniania.

  • Sugestie są wyświetlane w samouczku Dodawanie wyszukiwania do witryn internetowych i przykładzie kodu.

Użyj tych bibliotek w kliencie, aby utworzyć pole wyszukiwania, które obsługuje zarówno sugestie, jak i autouzupełnianie. Dane wejściowe zebrane w polu wyszukiwania można następnie sparować z sugestiami i akcjami autouzupełniania w usłudze wyszukiwania.

Sugestie

W tej sekcji przedstawiono implementację sugerowanych wyników, zaczynając od definicji pola wyszukiwania. Pokazano również, jak i skrypt, który wywołuje pierwszą bibliotekę autouzupełniania języka JavaScript, do których odwołuje się ten artykuł.

Zakładając, że biblioteka autouzupełniania interfejsu użytkownika jQuery i projekt MVC w języku C#, można zdefiniować pole wyszukiwania przy użyciu języka JavaScript w pliku Index.cshtml. Biblioteka dodaje interakcję wyszukiwania zgodnie z rzeczywistym typem do pola wyszukiwania, wykonując wywołania asynchroniczne do kontrolera MVC w celu pobrania sugestii.

W pliku Index.cshtml wewnątrz folderu \Views\Home wiersz do utworzenia pola wyszukiwania może wyglądać następująco:

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

W tym przykładzie jest prostym polem tekstowym wejściowym z klasą do stylów, identyfikatorem, do których należy odwołanie w języku JavaScript i tekstem zastępczym.

W tym samym pliku osadź kod JavaScript, który odwołuje się do pola wyszukiwania. Następująca funkcja wywołuje interfejs API Suggest, który żąda sugerowanych pasujących dokumentów na podstawie częściowych danych wejściowych terminów:

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

Polecenie source informuje funkcję autouzupełniania interfejsu użytkownika jQuery, w której ma być wyświetlana lista elementów wyświetlanych w polu wyszukiwania. Ponieważ ten projekt jest projektem MVC, wywołuje Suggest funkcję w HomeController.cs , która zawiera logikę zwracania sugestii dotyczących zapytań. Ta funkcja przekazuje również kilka parametrów w celu kontrolowania wyróżniania, dopasowywania rozmytego i terminu. Interfejs API autouzupełniania języka JavaScript dodaje parametr term.

Zapewnia minLength: 3 , że zalecenia są wyświetlane tylko wtedy, gdy w polu wyszukiwania znajdują się co najmniej trzy znaki.

Włączanie dopasowywania rozmytego

Wyszukiwanie rozmyte pozwala uzyskać wyniki na podstawie zbliżonych dopasowań nawet wtedy, gdy użytkownik błędnie napisze wyraz w polu wyszukiwania. Odległość edycji wynosi 1, co oznacza, że może istnieć maksymalna rozbieżność jednego znaku między danymi wejściowymi użytkownika a dopasowaniem.

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

Włączanie wyróżniania

Wyróżnianie stosuje styl czcionki do znaków w wyniku, które odpowiadają danym wejściowym. Jeśli na przykład częściowe dane wejściowe są mikro, wynik będzie wyświetlany jako mikrotrwały, mikrozakresitd. Wyróżnianie jest oparte na parametrach HighlightPreTag i HighlightPostTag zdefiniowanych w tekście z funkcją Suggest .

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

Sugerowanie, funkcja

Jeśli używasz języka C# i aplikacji MVC, plik HomeController.cs w katalogu Controllers to miejsce, w którym można utworzyć klasę dla sugerowanych wyników. Na platformie .NET Suggest funkcja jest oparta na metodzie SuggestAsync. Aby uzyskać więcej informacji na temat zestawu .NET SDK, zobacz How to use Azure AI Search from a .NET Application (Jak używać usługi Azure AI Search z poziomu aplikacji platformy .NET).

Metoda InitSearch tworzy uwierzytelnionego klienta indeksu HTTP w usłudze Azure AI usługa wyszukiwania. Właściwości klasy SuggestOptions określają, które pola są przeszukiwane i zwracane w wynikach, liczbę dopasowań i czy używane jest dopasowanie rozmyte.

W przypadku autouzupełniania dopasowanie rozmyte jest ograniczone do jednej odległości edycji (jeden pominięty lub zagubiony znak). Dopasowywanie rozmyte w zapytaniach autouzupełniania może czasami powodować nieoczekiwane wyniki w zależności od rozmiaru indeksu i sposobu jego fragmentowania.

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

Funkcja SuggestAsync przyjmuje dwa parametry, które określają, czy wyróżnienia trafień są zwracane, czy dopasowywanie rozmyte jest używane oprócz danych wejściowych terminu wyszukiwania. W sugerowanych wynikach można uwzględnić maksymalnie osiem dopasowań. Metoda tworzy obiekt SuggestOptions, który jest następnie przekazywany do interfejsu API Sugerowanie. Wynik jest następnie konwertowany na format JSON, dzięki czemu można go wyświetlić w kliencie.

Autouzupełnianie

Do tej pory kod środowiska użytkownika wyszukiwania został skoncentrowany na sugestiach. Następny blok kodu przedstawia autouzupełnianie przy użyciu funkcji autouzupełniania interfejsu użytkownika XDSoft jQuery, przekazując żądanie autouzupełniania usługi Azure AI Search. Podobnie jak w przypadku sugestii, w aplikacji języka C# kod obsługujący interakcję użytkownika przechodzi w pliku 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("");
        }
    });
});

Funkcja Autouzupełniania

Autouzupełnianie jest oparte na metodzie AutocompleteAsync. Podobnie jak w przypadku sugestii, ten blok kodu będzie w pliku 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);
}

Funkcja Autouzupełnianie przyjmuje dane wejściowe terminu wyszukiwania. Metoda tworzy obiekt AutoCompleteParameters. Wynik jest następnie konwertowany na format JSON, dzięki czemu można go wyświetlić w kliencie.

Następny krok

W poniższym samouczku przedstawiono środowisko wyszukiwania zgodnie z rzeczywistym typem.

Dodawanie wyszukiwania do witryny internetowej (C#)