Эффективный способ использования данных модели для автозаполнения jqueryui

Question

Я новичок в javascript и jquery.Я пытаюсь создать автозаполнение jqueryui с данными модели в качестве источника.Я застрял на том, что является лучшим способом сделать это.Я попытался инициализировать данные в документе. Уже так:

           var listAddress = [];

           foreach (var item in Model.allBuildings)
          {              


          //adding into address array all addresses for label  and its id.


          @: listAddress.push({ label: "@Html.Raw(item.Address)", id: "@item.ApartmentBlockID" });*@

          }

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

         Violation] 'setTimeout' handler took 113ms

Мой вопрос заключается в том, чтолучший способ использовать данные модели в качестве источника для автозаполнения?Моя самая большая загадка в том, что я нигде не установил функцию settimeout!Ошибка указывает на функцию settimeout в скрипте jqueryui ??

Обновление: это мой взгляд

      // first autocomplete

        <div class="col-md-10">
        @Html.HiddenFor(model => model.renovationDetail.ApartmentBlockID, new { @id = "hidden_apartblockID" })
        @Html.EditorFor(model => model.BuildingID, new { htmlAttributes = new { @class = "form-control", @id = "show_buildingID" } })
        @Html.ValidationMessageFor(model => model.renovationDetail.ApartmentBlockID, "", new { @class = "text-danger" })
    </div>
</div>


          //second autocomplete
         <div class="form-group">
    @Html.LabelFor(model => model.allBuildings.First().Address, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @id = "show_address" } })
        @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
    </div>
</div


   This is my javascript for address autocomplete(I do the same for the other one):

                                ////function to load building addresses when page loads.
          function ChangeAddressForSelect() {

              //creating autocomplete for address
              $('#show_address')
                  .blur(
                    function () {
                        var keyEvent = $.Event("keydown");
                        keyEvent.keyCode = $.ui.keyCode.ENTER;
                        $(this).trigger(keyEvent);

                  //    })
                  .autocomplete({
                      //source: '/Renovations/GetAddressForEdit',
                      source: function (request, response) {
                          response($.ui.autocomplete.filter(listAddress, 
                                                      request.term));
                      },
                      minLength: 0,
                      scroll: true,
                      select: function (event, ui) {
                          //set tagids to save
                          //$("#hidden_apartblockID").val(ui.item.id);
                          //// Tags for display
                          //this.value = ui.item.value;

                          return false;
                      },
                      focus: function () { $(this).autocomplete("search"); return false; },


                  .blur(function () {

                      //$(this).autocomplete('enable');


                  });

Какой самый эффективный способ использовать данные модели в качестве источника для каждогоautcomplete?Стоит ли переходить на ajax или данные из источника ajax замедляют загрузку страницы?

Answer 1

Вот пример, который, я надеюсь, поможет.

$(function() {
  var listAddress = [{
    label: "Address 1",
    value: 1,
    id: 1
  }, {
    label: "Address 2",
    value: 2,
    id: 2
  }, {
    label: "Address 3",
    value: 3,
    id: 3
  }];

  function saveAddress(e) {
    var a = parseInt($("#address_id").val());
    if (isNaN(a)) {
      return;
    }
    // Post back to save selected Address ID
    return true;
  }

  $('#show_address').autocomplete({
    source: listAddress,
    minLength: 0,
    scroll: true,
    select: function(event, ui) {
      $("#address_id").val(ui.item.id);
      $(this).val(ui.item.label);
      // Trigger any other events or post backs
      return false;
    }
  }).focus(function() {
    $(this).autocomplete("search", "");
    return false;
  }).blur(saveAddress);
});

.hidden {
  opacity: .25;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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>

<div class="form-group">
  <!--
  @Html.LabelFor(model => model.allBuildings.First().Address, htmlAttributes: new { @class = "control-label col-md-2" })
  -->
  <label class="control-label col-md-2">Address</label>
  <div class="col-md-10">
    <input type="text" id="show_address" class="form-control" />
    <input type="text" id="address_id" class="hidden form-control" />
    <!--
        @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @id = "show_address" } })
        -->
  </div>
</div>

Во-первых, лучше всего обратиться к структуре вашего источника.Вы можете использовать id, однако Autocomplete ищет массив или массив определенных объектов.

Массив объектов со свойствами меток и значений: [ { label: "Choice1", value: "value1" }, ... ]

Вы можете добавить другие свойства, если это необходимо.Если ваши данные просты, я бы просто добавил label и value.

Далее, для focus и blur, то, как вы хотите их использовать, будет вне автозаполнения,привязаны к событиям с помощью самого поля ввода.Для Фокуса при автозаполнении это связано с фокусом элементов списка.

Срабатывает, когда фокус перемещается на элемент (не выбирается).Действие по умолчанию - заменить значение текстового поля значением выделенного элемента, хотя только в том случае, если событие было вызвано взаимодействием с клавиатурой.

Также было неясно, что вы хотели сделать.Похоже, вы хотели отправить обратно выбранный идентификатор для обновления в вашей базе данных где-то.Я бы сделал это с $.post() или $.ajax().Я больше работаю с PHP, чем с .NET, поэтому я не могу много говорить об этом, и ваш пример кода на самом деле не показывает, что вы хотите сделать.

Надеюсь, это поможет /