Как реализовать Select с инкрементальным поиском с помощью jquery UI

Проект C# asp net core. Использую jQuery v3.5.1 и BootStrap 4.

Есть Select:

<div class="form-group">
        <label asp-for="HouseId" class="control-label"></label>
        <select id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.GetHouses"></select>
</div>

Нужно сделать поиск для данного Select, чтобы при его активации можно было не крутить, а начать вводить и отображались подходящие варианты. Реализовать нужно на фронте.

По совету @teran рассмотрел вариант jquery UI autocomplete по данной ссылке (https://jqueryui.com/autocomplete/#default).

Первая проблема возникла с импортом зависимостей:

<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

Выдавало следующие ошибки:

GET http://localhost:18246/resources/demos/style.css net::ERR_ABORTED 404 (Not Found)

В проекте у меня jQuery находится и подключается следующим образом:

<script src="~/lib/jquery/dist/jquery.min.js"></script>

если правильно понял, в нем не хватает библиотек.

Нашел другой вариант подключения:

<meta charset="utf-8">
<title>jQuery UI</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">

<script src="~/lib/jquery/dist/jquery.min.js"></script>

Данный вариант при загрузки страницы прошел без ошибок.

Но при срабатывании обработчика выдало ошибки:

jQuery.Deferred exception: $(...).autocomplete is not a function TypeError: $(...).autocomplete is not a function
    at HTMLDocument.<anonymous> (http://localhost:18246/Friends/Create:349:27)
    at e (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30005)
    at t (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30307)

undefined S.Deferred.exceptionHook @ jquery.min.js:2 t @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 c @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 c @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 B @ jquery.min.js:2

Uncaught TypeError: $(...).autocomplete is not a function at HTMLDocument. (Create:349) at e (VM17 jquery.min.js:2) at t (VM17 jquery.min.js:2)

Саму реализацию поиска до конца ещё не доделал, то что сделано:

        $(document).ready(function () {
            //Получение всех элементов требуемого html объекта  select
            var strHouses = $("#HouseId>option").map(function () { return $(this).val(); }).get().join();

            //Преобразуем строку c элементами в массив
            var houses = strHouses.split(',');

            // Поиск в массиве
            $('#HouseId').autocomplete({
                source: houses,
            //    select: function (event, ui) {
            //        $('#HouseId').val(data[ui.item.value]);
            //    }
            })
        });

<div class="form-group">
            <label asp-for="HouseId" class="control-label"></label>
            <select id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.GetHouses"></select>
    </div>

Суть функции в том, что сперва берем все элементы которые есть в массиве и их указываем в источнике autocomplete.

Как правильно импортировать jquery UI autocomplete в проект, чтобы не было ошибок, которые описал выше?

Как верно реализовать функцию поиска для Select? Примеров в сети для Select не нашел. Не знаю как сделать ввод текста для поиска.

Добавил ссылки на зависимости для select2:

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</environment>

Согласно офдокам написал функцию:

$(document).ready(function () {
            $('#HouseId').select2({
                dropdownParent: $('#divHouse'),
                placeholder: "Выберите дом",
                minimumInputLength: 1, // only start searching when the user has input 3 or more characters
                maximumInputLength: 5, // only allow terms up to 20 characters long
                language: "ru"
            });
        });

При срабатывании обработчика:

jQuery.Deferred exception: $(...).select2 is not a function TypeError: $(...).select2 is not a function
    at HTMLDocument.<anonymous> (http://localhost:18246/Friends/Create:362:27)
    at e (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30005)
    at t (http://localhost:18246/lib/jquery/dist/jquery.min.js:2:30307) undefined

Uncaught TypeError: $(...).select2 is not a function
    at HTMLDocument.<anonymous> (Create:362)
    at e (VM18 jquery.min.js:2)
    at t (VM18 jquery.min.js:2)