Javascript Knockout jqAutoComplete在编辑过程中显示ID值而不是名称

我使用的是淘汰赛2.2.1、JQuery 1.9.1和Ryan Niemeyer的淘汰赛jqAutoComplete 0.4.3

该应用程序允许用户将联系人添加到联系人列表中。联系人信息来自可能的联系人列表

我们使用一个span来显示页面加载时数据库和数据模型中存在的联系人的名称。当用户单击姓名时，他们有机会编辑或删除联系人。我们隐藏跨度并在其位置显示输入字段。此字段是自动完成字段，应显示联系人的姓名

用户还可以单击一个按钮添加一个新联系人，这将添加一个新行，该行带有一个同样使用自动完成的输入字段

单击“保存”按钮时，用户编辑或添加的信息将保持不变

问题

当用户进入编辑模式时，输入显示ID而不是名称

以下是页面加载时显示的数据，以及切换到编辑模式时显示的数据。在第二张图片中，我们希望它显示“Doe，John”，而不是数据库中的主键

使用旧版本的Knockout jqAutoComplete，这不是问题。（我们更新到了当前版本，因为还有其他问题。）我找不到版本号，但它是通过包含一个Razor部分来使用的，“\u jqueryyautompletebinding.cshtml”。此旧版本的绑定为：

//Deprecated, no longer in use.
<input data-bind="jqAuto: { autoFocus: false }, jqAutoSource: optionsProfessionalsAuto, jqAutoQuery: getProfessionals, jqAutoValue: ProfessionalId, jqAutoSourceLabel: 'displayName', jqAutoSourceInputValue: 'Name', jqAutoSourceValue: 'Id'" class="edit-data Name"  />

（编辑1） 以下是GetProfessionals，如有要求：

function getProfessionals(searchTerm, sourceArray) {
try {
    $.ajax({
        type: "GET"
        , contentType: 'application/json; charset=utf-8'
        , url: '@Url.Action(MVC.Professional.ActionNames.GetProfessionals, MVC.Professional.Name)?searchTerm=' + searchTerm
            , dataType: "json"
            , success: function (data) {
                var result = [];
                for (var i = 0; i < data.length; i++) {
                    var specialty = data[i].Specialty ? data[i].Specialty + " - " : "";
                    result.push({ Name: data[i].Name + " (" + specialty + data[i].City + ", " + data[i].State + ")", ProfessionalId: data[i].ProfessionalId });
                }

                sourceArray(result);
            }
            }
        )
        .fail(function () { $.unblockUI(); $.growlUI('Error', 'Failed to get professionals. Unknown error.'); });
} catch (e) {
    $.unblockUI();
    throw e;
}

根据RP的回答，我添加了一个名为IDViewModel的obj。返回名称和专业ID。但是，这并没有作为嵌套对象转化为可观察对象，因此我们现在从getProfessionals传递整个ProfessionalContactViewModel：

result.push(ko.toJSON(data));

我已从输入绑定中删除valueProp；在其他方面，它读起来和以前一样，但我在编辑联系人时仍然看到一个数字

---

按姓名搜索联系人时，“浏览器”选项卡也会冻结几秒钟，并显示一个完全空白的列表。这两个新问题中的前一个问题可能是由于数据量较大。

您能告诉我

getProfessionals

是什么样子吗？我认为问题在于，您的源数据是一个远程查询，没有上下文来查找当前值的

名称

，因为它只是一个id（

ProfessionalId

）。您可以去掉

valueProp

选项，然后它将存储/期望对象作为值，如

{Name:'ryan'，professional id:1122}

。您只需确保使用所选值的任何位置都首先选择Professional ID。@RPNiemeyer，我编辑了这篇文章。这就是你所期望的吗？是的！我的建议有意义吗？您是否可以处理对象而不仅仅是Professional ID？@RPNiemeyer，请查看我的第二次编辑。

function getProfessionals(searchTerm, sourceArray) {
try {
    $.ajax({
        type: "GET"
        , contentType: 'application/json; charset=utf-8'
        , url: '@Url.Action(MVC.Professional.ActionNames.GetProfessionals, MVC.Professional.Name)?searchTerm=' + searchTerm
            , dataType: "json"
            , success: function (data) {
                var result = [];
                for (var i = 0; i < data.length; i++) {
                    var specialty = data[i].Specialty ? data[i].Specialty + " - " : "";
                    result.push({ Name: data[i].Name + " (" + specialty + data[i].City + ", " + data[i].State + ")", ProfessionalId: data[i].ProfessionalId });
                }

                sourceArray(result);
            }
            }
        )
        .fail(function () { $.unblockUI(); $.growlUI('Error', 'Failed to get professionals. Unknown error.'); });
} catch (e) {
    $.unblockUI();
    throw e;
}

public class ProfessionalContactEditViewModel
{
    public int? ClientContactId { get; set; }
    public int ProfessionalId { get; set; }
    public string Name { get; set; }
    public string Specialty { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
    public string Address1 { get; set; }
    public string Address2 { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }

    public bool Send { get; set; }
    public bool ReferredBy { get; set; }

    public bool Delete { get; set; }

    //Added based on RPNiemeyer's response
    //public NameIdViewModel ProfessionalNameId
    //{
    //    get
    //   {
    //        return new NameIdViewModel()
    //        {
    //            Name = this.Name,
    //            Id = this.ProfessionalId,
    //        };
    //    }
    //    set
    //    {
    //        this.Name = value.Name;
    //        this.ProfessionalId = value.Id ?? default(int);
    //    }
    //}
}

result.push(ko.toJSON(data));