Question

我是javascript和jquery的新手。我正在尝试使用模型数据作为源创建自动完成的jqueryui。我陷入了如何做到这一点的最好方法。我试图初始化document.ready中的数据，像这样：

           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函数！错误指向jqueryui脚本中的settimeout函数？

更新：这是我的观点

      // 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');


                  });

使用模型数据作为每个自动完成的来源的最有效方法是什么？我应该切换到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>

首先，最好解决您的Source结构。您可以使用id，但“自动完成”正在查找一个数组或特定对象的数组。

具有标签和值属性的对象数组：[ { label: "Choice1", value: "value1" }, ... ]

您可以根据需要添加其他属性。如果您的数据很简单，我只会保留label和value。

接下来，对于focus和blur，您要使用它们的方式将在自动完成功能之外，并通过输入字段本身绑定到事件。对于“自动完成中的焦点”，这与列表项的焦点有关。

将焦点移至某个项目（未选择）时触发。默认操作是将文本字段的值替换为焦点项目的值，尽管仅当事件是由键盘交互触发的时才如此。

也不清楚您想做什么。您似乎想回发选定的ID以在数据库中的某个地方进行更新。我可以使用$.post()或$.ajax()来做到这一点。我在PHP上比.NET做更多的工作，所以我不能过多地谈论这个问题，并且您的示例代码并没有真正表明您想要做什么。

希望有帮助/

使用模型数据进行jqueryui自动完成的有效方法

1 个答案: