Поделиться через

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

  • Статья

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

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

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

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

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

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

Одним из элементов запроса является один из API-интерфейсов поиска по мере использования, частичный запрос и средство подбора. Следующий скрипт иллюстрирует компоненты запроса, используя в качестве примера REST API автозавершения.

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметр Использование
searchFields Ограничьте запрос конкретными полями.
$filter Примените критерии соответствия для результатов ($filter=Category eq 'ActionAdventure').
$top Ограничьте результаты конкретным количеством ($top=5).

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

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

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

  • Мини-приложение autocomplete (пользовательский интерфейс jQuery) отображается в фрагменте кода предложения. Вы можете создать поле поиска, а затем ссылаться на него в функции 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 предложения, запрашивающий документы, соответствующие предложению, на основе частичных входных данных термина.

$(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&",

Функция Suggest

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

Метод InitSearch создает клиент индексов HTTP, прошедший проверку подлинности, в служба ИИ Azure. Свойства класса 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, чтобы его можно было передать клиенту.

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

В следующем руководстве показано взаимодействие с поиском по мере ввода.

Добавление поиска на веб-сайт (C#)