Как добавить автозаполнение JqueryUI на страницу макета в Razor Pages с помощью ViewComponent

Question

Я использую Razor Pages, чтобы создать ViewComponent для добавления поля поиска автозаполнения Jqueryui вверху каждой страницы. Я добавляю компонент вида на страницу Layout с автозаполнением, и он соответствует javascript. Мне трудно собрать все части вместе, страница запускается, но элемент управления поиском не работает, а метод ViewComponent Invoke вызывается, как только страница построена, его нужно вызывать только как обработчик для запрос ajax.

Не верен ли маршрут ajax к моему методу-обработчику? Любые другие предложения?

У меня есть ViewComponent с этим кодом.

namespace SetpointIS.VuPoint.ViewComponents
{
    public class SearchViewComponent : ViewComponent
    {
        public SearchViewComponent()
        {
        }

        public IViewComponentResult Invoke(string term)
        {
            //var searchResults = _searchService.GetSearchResults(term);
            System.Collections.Generic.List<SearchResult> searchResult = new System.Collections.Generic.List<SearchResult>{
            new SearchResult{ id = 1, label = "fred", value = "smith", type = "man"},
            new SearchResult{ id = 1, label = "jane", value = "smith", type = "woman"},
            new SearchResult{ id = 1, label = "bill", value = "smith", type = "man"},
            new SearchResult{ id = 1, label = "ted", value = "smith", type = "man"}
            };
            return View(searchResult);
        }
    }
}

Это код для моего default.cs html.

@page
@model List<SetpointIS.Models.SearchResult>

@{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textSearch').autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url: '/Search/Search',
                        dataType: "json",
                        data: { term: request.term.toLowerCase() },
                        success: function( data ) {
                        response( data );
                        }
                    });
                },
                appendTo: "#autocompleteRow",
                minLength: 2,
                position: { my: "right top", at: "right bottom" },
                classes: { "ui-autocomplete": "bg-white" },
                select: function (event, ui) {
                    //$("#hidJobNumber").val(ui.item.id);
                }
            });
        });
    </script>
    <div class="app-header-left">
        <div class="search-wrapper">
            <div class="input-holder">
                <input id="textSearch" type="text" class="search-input" placeholder="Type to search">
                <button class="search-icon"><span></span></button>
            </div>
            <button class="close"></button>
        </div>
    </div>
}

Я добавляю ViewComponent на страницу макета с этим.

@await Component.InvokeAsync("Search")