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

  • Статья

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

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

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

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

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

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

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

POST /indexes/myxboxgames/docs/autocomplete?search&api-version=2020-06-30
{
  "search": "minecraf",
  "suggesterName": "sg"
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предложения

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

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

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

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, чтобы его можно было передать клиенту.

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

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

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