Question

我已经完成了我需要的功能，我正在寻找一些帮助。我有一个VendorID属性的模型。我有一个使用此模型的强类型视图。我允许用户从使用自动完成的输入文本框中选择供应商。

我使用这种剃刀语法将模型的VendorID属性绑定到视图上的隐藏字段。

@Html.HiddenFor(m => m.VendorID)

当用户在文本框中键入几个字符并选择一个项目时，我已经设置的jquery函数设置了隐藏字段的值。到目前为止，一切都很好。我遇到的问题是，如果用户完全清除文本框或输入无效文本，而没有选择有效值，则我的隐藏字段无法更新。

这是我到目前为止的jquery。

$(document).ready(function () {
    $('#vendorautocomplete').val($('#VendorName').val());  //prepopulate our vendorautocomplete textbox from our model
});

$(function () {

    $('#vendorautocomplete').autocomplete({

        source: function (request, response) {
            $.ajax({
                url: "/test/vendors", type: "POST", dataType: "json", //Url to our action supplying a list of vendors
                data: { searchString: request.term, maxRecords: 10 }, 
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.VendorName, value: item.VendorName, id: item.VendorID };
                    }));
                }
            });
        },
        select: function (event, ui) {
            $('#VendorID').val(ui.item ? ui.item.id : 0); //Set our VendorID hidden for model binding
        }

    });
});

我希望我能在自动完成功能中做一些类似于选择的功能：上面仅用于模糊：但是没有用。我想我可以使用模糊事件根据文本框中的值查找供应商的ID，但似乎在某些时候我应该能够检测到无效的供应商名称并将隐藏字段设置为0，我只是不知道在哪里。

Answer 1

我设法通过在脚本中添加以下内容来完成我想要做的事。

对于错误的搜索数据（没有返回值）

success: function (data) {
                    var arr = $.map(data, function (item) { return { label: item.VendorName, value: item.VendorName, id: item.VendorID }; });
                    if (arr.length == 0) {
                        $('#VendorID').val(null);
                        $('#VendorName').val('');
                    }
                    response(arr);
                }

我检查更改事件

上的空白文本框

  $(function () {
      $('#vendorautocomplete').change(function () {
          if ($('#vendorautocomplete').val() == null || $('#vendorautocomplete').val() === "") {
              $('#VendorID').val(null);
              $('#VendorName').val('');
          }
      });
  });

不确定这是最好的解决方案，但它确实有效，我需要解决其他问题。

jquery自动完成MVC3

1 个答案: