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" });*@ }

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

这是一个我希望能有所帮助的例子。

$(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 ,使用它们的方式将不在自动完成功能范围内,而是绑定到具有输入字段本身的事件。对于自动完成中的焦点,这与列表项的焦点相关。

焦点移动到项目时触发(未选择)。默认操作是将文本字段的值替换为焦点项的值,但前提是事件是由键盘交互触发的。

也不清楚你想做什么。您似乎想将选定的id发回数据库中的某个位置进行更新。我会这么做的 $.post() 或 $.ajax() . 与.net相比,我在php上做的工作更多,所以我不能说这么多,而且您的示例代码并没有真正显示出您想要做什么。

希望能帮上忙/