Добавление предложений автозаполнения и поиска в клиентских приложениях

Поиск по мере ввода — это распространенный способ повышения производительности запросов. В поиске ИИ Azure этот интерфейс поддерживается с помощью автозаполнения, которое завершает термин или фразу на основе частичных входных данных (например, завершение микро возможными вариантами микрочип, микроскоп, Microsoft и другими подходящими совпадениями). Второй пользовательский интерфейс — это предложения, которые создают краткий список соответствующих документов (например, возвращая названия книги с идентификатором, чтобы вы могли связаться со страницей сведений об этой книге). Как автозавершение, так и предложения зависят от соответствия в индексе. Служба не предлагает автоматически завершенные запросы или предложения, возвращающие нулевые результаты.

Чтобы реализовать эти возможности в поиске ИИ Azure, выполните указанные ниже действия.

• Добавьте suggester в схему индекса.
• Создайте запрос, чтобы вызвать API автозавершения или API предложений для запроса.
• Добавьте элемент управления пользовательского интерфейса для обработки взаимодействий с поиском по мере ввода в клиентском приложении. Для этой цели рекомендуется использовать существующую библиотеку JavaScript.

В службе "Поиск ИИ Azure" из индекса поиска извлекаются автоматически дополняемые запросы и предлагаемые результаты из выбранных вами полей, которые вы регистрируете в предлагателе. Подсказчик является частью индекса и указывает, какие поля предоставляют контент, который завершает запрос, предлагает результат или и то, и другое. При создании индекса и его загрузке внутри создается структура данных подбора, позволяющая хранить префиксы, используемые для сопоставления в частичных запросах. Для удобной работы с предложениями важно выбрать подходящие поля, которые являются уникальными или по крайней мере не повторяющимися. Дополнительные сведения см. в разделе "Настройка предложения".

Оставшаяся часть этой статьи посвящена запросам и клиентскому коду. Для иллюстрации ключевых моментов используются JavaScript и C#. Для краткого представления каждой операции используются примеры REST API. Полные примеры кода см. в разделе "Добавление поиска на веб-сайт" с помощью .NET.

Создание запроса

Элементы запроса включают один из API поисковых систем с функцией "по мере набора", частичный запрос и механизм предложений. Следующий скрипт иллюстрирует компоненты запроса, используя в качестве примера REST API автозавершения.

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

Этот suggesterName параметр предоставляет поля, поддерживаемые предложением, которые используются для выполнения терминов или предложений. Для предложений, в частности, список полей должен состоять из предложений, которые предлагают четкий выбор между соответствующими результатами. На сайте, продающем компьютерные игры, это поле может быть названием игры.

Параметр search предоставляет частичный запрос, где символы передаются запросу через элемент управления автозаполнения jQuery. В предыдущем примере minecraf представляет собой статическую иллюстрацию того, как управление может использоваться.

API не накладывают минимальные требования к длине для частичного запроса; это может быть как можно меньше одного символа. Однако элемент автозавершения jQuery устанавливает минимальную длину. Обычно используется минимум два или три символа.

Соответствия начинаются с начала термина в любом месте входной строки. Учитывая быструю коричневую лису, как автозаполнение, так и предложения совпадают с частичными версиями быстрого, коричневого или лисы, но не с частичными инфиксными терминами, такими как rown или ox. Кроме того, каждое соответствие задает область для последующих расширений. Частичный запрос быстрого бр совпадает с быстрый коричневый или быстрый хлеб, но ни коричневый или хлеб сами по себе не будут совпадением, если перед ними не стоит быстрый*.

Интерфейсы API для поиска по мере ввода

Перейдите по следующим ссылкам на справочные страницы по REST API и .NET SDK.

• REST API для предложений
• REST API для автозаполнения
• Метод SuggestAsync
• Метод AutocompleteAsync

Структурирование ответа

Ответы для автозавершения и предложений — это то, что можно ожидать для шаблона: функция Автозавершение возвращает список терминов, а функция Предложения возвращает термины и идентификатор документа, позволяющий извлечь документ (используйте API-интерфейс Поиск документов, чтобы извлечь конкретный документ для страницы сведений).

Ответы обрабатываются в соответствии с параметрами запроса.

• Для автозаполнения установите autocompleteMode, чтобы определить, происходит ли завершение текста с одним словом или двумя.

• Для предложений задайте $select чтобы возвращать поля с уникальными или отличительными значениями, такими как имена и описание. Избегайте полей, содержащих дублирующиеся значения (такие как категория или город).

Следующие параметры применяются как к автозаполнению, так и к предложениям, но более применимы к последним, особенно если предложения включают несколько полей.

Добавьте пользовательский код взаимодействия

Автозаполнение поискового запроса или отображение списка сопоставленных ссылок требует кода взаимодействия с пользователем, обычно JavaScript, который может обрабатывать запросы из внешних источников, таких как автозавершение или запросы предложений к когнитивному индексу Azure Search.

Хотя вы можете написать этот код в собственном коде, проще использовать функции из существующей библиотеки JavaScript, например одну из следующих.

• Autocomplete widget (jQuery UI) отображается в коде с предложениями. Вы можете создать поле поиска, а затем использовать его в функции JavaScript, которая использует виджет автозаполнения. В свойствах виджета устанавливаются источник (функция автозавершения или предложений), минимальная длина ввода символов перед выполнением действия и размещение.

• Подключаемый модуль автозаполнения XDSoft отображается в кодовом фрагменте автозаполнения.

• Предложения отображаются в учебном пособии по добавлению функции поиска на веб-сайты и образце кода.

Используйте эти библиотеки в клиенте, чтобы создать поле поиска, которое поддерживает как предложения, так и автозавершение. Входные данные, собранные в поле поиска, затем можно сопоставить с предложениями и функцией автодополнения в службе поиска.

Предложения

В этом разделе описывается реализация предлагаемых результатов, начиная с определения поля поиска. В нем также приведен скрипт, вызывающий первую библиотеку автозавершения JavaScript, указанную в этой статье.

Создание поля поиска

Предполагая наличие библиотеки автозавершения пользовательского интерфейса jQuery и проекта MVC на C#, можно определить поле поиска с помощью JavaScript в файле index.cshtml. Библиотека добавляет в поле поиска функцию поиска по мере ввода, делая асинхронные вызовы контроллера MVC для получения предложений.

В Index.cshtml в папке \Views\Home строка для создания поля поиска может быть следующим образом:

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

В этом примере создается простое текстовое поле ввода с классом для определения стиля, идентификатором для ссылок на JavaScript и замещающим текстом.

В том же файле встроен код JavaScript, ссылающийся на поле поиска. Следующая функция вызывает API Suggest, который запрашивает предложенные совпадающие документы на основе частичных данных ввода термина.

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

source указывает функции автозавершения в пользовательском интерфейсе JQuery, где можно получить список элементов для отображения под полем поиска. Так как этот проект является проектом MVC, он вызывает Suggest функцию в HomeController.cs , содержащую логику возврата предложений запросов. Также эта функция передает несколько параметров для управления выделением, нечетким соответствием и терминами. API JavaScript автозаполнения добавляет параметр термина.

Элемент minLength: 3 гарантирует, что рекомендации отображаются только в том случае, если в поле поиска введено не менее трех символов.

Включение нечеткого соответствия

Нечеткий поиск позволяет получить результаты на основе близких совпадений, даже если пользователь неверно напишет слово в строке поиска. Расстояние правки равно 1. Это означает, что максимальное допустимое расхождение между данными, введенными пользователем, и совпадением составляет один символ.

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

Включение выделения

При выделении к символам в результате, соответствующим входным данным, применяется стиль шрифта. Например, если частичный вход является микро, результат будет отображаться как микромягкий, микрообрези т. д. Освещение основано на параметрах HighlightPreTag и HighlightPostTag, определенных внутри функции Suggest.

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

Функция предложений

Если вы используете C# и приложение MVC, файл HomeController.cs в каталоге Controllers — это место, где вы можете создать класс для предлагаемых результатов. В .NET функция Suggest основывается на методе SuggestAsync. Дополнительные сведения о пакете SDK для .NET см. в статье "Использование поиска ИИ Azure" из приложения .NET.

Метод InitSearch создает прошедшего аутентификацию клиента HTTP индекса для службы поиска Azure AI. Свойства класса SuggestOptions определяют поля для поиска и возвращения в результатах, число совпадений и то, используется ли нечеткое соответствие.

Для автозавершения нечеткое соответствие ограничено расстоянием в одно изменение (один пропущенный или неправильно расположенный знак). Нечеткое сопоставление в запросах автозаполнения иногда может привести к непредвиденным результатам в зависимости от размера индекса и шардинга.

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

Функция SuggestAsync принимает два параметра, которые определяют, возвращается ли выделение совпадений или используется нечеткое сопоставление в дополнение к введенному поисковому термину. Предложенные результаты могут содержать до восьми совпадений. Этот метод создает объект SuggestOptions, затем передаваемый в API предложений. Затем результат преобразуется в JSON, чтобы его можно было передать клиенту.

Автозавершение

До сих пор код пользовательского интерфейса поиска был сосредоточен на предложениях. В следующем блоке кода показано автозавершение с помощью функции автозаполнения пользовательского интерфейса XDSoft jQuery, передавая запрос на автозавершение поиска ИИ Azure. Как и в случае с предложениями, в приложении C# код, поддерживающий взаимодействие с пользователем, находится в 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("");
        }
    });
});

Функция автозавершения

Автозавершение основано на методе AutocompleteAsync. Как и в случае с предложениями, этот блок кода будет находиться в файле 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);
}

Эта функция автозавершения принимает входной поисковый термин. Затем этот метод создает объект AutoCompleteParameters. Затем результат преобразуется в JSON, чтобы его можно было передать клиенту.

Следующий шаг

В следующем руководстве демонстрируется функция поиска по мере ввода.