Dodawanie sugestii dotyczących autouzupełniania i wyszukiwania w aplikacjach klienckich
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 (uzupełnianie ciągu "mikrochip", "mikroskop", "microsoft" i innych dopasowań mikro). Drugie środowisko użytkownika to sugestie lub krótka lista pasujących dokumentów (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 będzie oferować automatycznie wypełnionych zapytań ani sugestii, które zwracają zero wyników.
Aby zaimplementować te środowiska w usłudze Azure AI Search:
- Dodaj element
suggesterdo schematu indeksu. - Skompiluj zapytanie, które wywołuje interfejs API autouzupełniania lub sugestii w żądaniu.
- Dodaj kontrolkę interfejsu użytkownika, aby obsługiwać interakcje wyszukiwania zgodnie z rzeczywistym typem w aplikacji klienckiej. W tym celu zalecamy używanie istniejącej biblioteki Języka JavaScript.
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 Tworzenie 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 Następne kroki.
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=2020-06-30
{
"search": "minecraf",
"suggesterName": "sg"
}
Pole "suggesterName" zawiera pola obsługujące sugerowanie używane do wykonywania terminów lub sugestii. W szczególności w przypadku sugestii lista pól powinna składać się z tych, 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 powyższym przykładzie "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 "the", "quick", "brown" lub "fox", ale nie na częściowych terminach, takich jak "rown" lub "ox". Ponadto każde dopasowanie określa zakres rozszerzeń podrzędnych. Częściowe zapytanie o "szybki br" będzie pasować do "szybkiego brązowego" lub "szybkiego chleba", ale ani "brązowy" ani "chleb" przez siebie nie będzie 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:
- Interfejs API REST sugestii
- Autouzupełnianie interfejsu API REST
- SuggestAsync, metoda
- AutocompleteAsync, metoda
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 obszarze Autouzupełnianie ustaw autouzupełnianieMode, aby określić, czy uzupełnianie tekstu występuje na jednym lub dwóch terminach.
W polu Sugestie 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łnianie. 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 JavaScript i przykładzie kodu.
Użyj tych bibliotek w kliencie, aby utworzyć pole wyszukiwania obsługujące 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ł.
Tworzenie pola wyszukiwania
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 w folderze \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 funkcję Suggest 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 będą 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. Na przykład jeśli częściowe dane wejściowe to "mikro", wynik będzie wyświetlany jako mikrotrwały, mikrozakresitd. Wyróżnianie jest oparte na parametrach HighlightPreTag i HighlightPostTag zdefiniowanych w tekście za pomocą funkcji Sugestia.
source: "/home/suggest?highlights=true&fuzzy=true&",
Sugerowanie, funkcja
Jeśli używasz języka C# i aplikacji MVC, HomeController.cs plik w katalogu Controllers to miejsce, w którym można utworzyć klasę dla sugerowanych wyników. Na platformie .NET funkcja Suggest 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ępne kroki
W poniższym samouczku przedstawiono środowisko wyszukiwania zgodnie z rzeczywistym typem.