Jquery 将ID绑定为自动完成中的文本值

我在使用剑道自动完成，因为我在填充文本，也在使用文本解析数据， 但我想使用ID作为值，在表单提交时将其发送到服务器端

我正在使用此剑道编辑器，但无法将CustomerID绑定为Autocomplete:的值：

 @(Html.Kendo().AutoComplete()
                                  .Name("Customers")
                                  .DataTextField("CustomerShortName")
                                  .Value("CustomerID")
                                  .Filter("contains")
                                  .MinLength(3)
                                  .Template("<label>${ data.CustomerShortName }</label>")
                                  .HtmlAttributes(new {  disabled="disabled" })
                                  .DataSource(source =>
                                  {
                                      source.Read(read =>
                                      {
                                          read.Action("GetCustomers", "GetData");
                                      })
                                      .ServerFiltering(true);
                                  })
                            )   

---

请尽快帮助我。

这不能用自动完成来完成。后者只是一个带有附加建议列表的常规文本框。您可以使用不同的小部件。组合框或下拉列表。两者都允许有文本和值。

我已经用另一种方式做到了这一点， 我为其ID值创建了一个隐藏类型，即CustomerID为

@Html.HiddenFor(x=>x.CustomerID)

关于剑道自动完成的变化，我写了一些事件

    @(Html.Kendo().AutoComplete()
                                      .Name("Customers")
                                      .DataTextField("CustomerShortName")
                                     .Events(events => events.Select("CustomerSelect"))
                                      .Filter("contains")
                                      .MinLength(3)
                                      .Template("<label>${ data.CustomerShortName }</label>")
                                      .HtmlAttributes(new {  disabled="disabled" })
                                      .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("GetCustomers", "GetData");
                                          })
                                          .ServerFiltering(true);
                                      })
                                )    

为此，我将Javascript函数用作：

<script>
//Set CustomerID
    function CustomerSelect(e)
    {
        var DataItem = this.dataItem(e.item.index());
        $("#CustomerID").val(DataItem.CustomerID);
}
</script>

我在提交表单时使用的值。

---

感谢您的帮助。

自动完成中的值字段绑定是不可能的，另一种方法是组合框

@(Html.Kendo().ComboBox()
            .Name("Combobox")
            .DataValueField("Value")
            .DataTextField("Text")
            .Filter(FilterType.Contains)
            .HtmlAttributes(new { value = propertyValue })
            .DataSource(source => {
                source.Read(read => {
                    read.Action(action, controller); //Set the Action and Controller name
                })
                .ServerFiltering(true);) //If true the DataSource will not filter the data on the client.
            })                              //, new { maxResults = 10 }
            .AutoBind(true).HighlightFirst(true).HtmlAttributes(htmlAttributes).Enable(true)
            .Events(e => e.Change("function(e){ if(ComboOnChange(e)){" + onChange + "(e);} }"));

---

更改事件是您希望在combobox中更改值时调用的javascript函数。

您不能仅绑定到ID，但可以使用MVVM绑定绑定到所选对象。从那里你可以访问ID

HTML

 <div id="view">
    <div>
       <h4 data-bind="text: selectedCustomer.CustomerID"></h3>
   </div>

   <span> Select Customer: </span>
   <input data-role="autocomplete"
          data-value-primitive="false"
          data-text-field="CustomerShortName"
          data-bind="value: selectedCustomer,
                     source: Customers" />
   </div>

---

可以在此处找到一个工作示例

如果清除“选定”，则标记的解决方案不起作用，我通过此解决方案解决了此问题：

$().ready(function () {

    $("#Customers").change(function () {
        var au = $("#Customers").data("kendoAutoComplete");
        var selected = au.listView.selectedDataItems();
        if (selected.length > 0) {
             $("#CustomerID").val(selected[0].CustomerID);
        } else {
             $("#CustomerID").val("");
        }
    });

}

---

我正在使用AutoCompleteFor，如果从后端获取CustomerID而不是CustomerShortName，如何在中显示文本字段

$().ready(function () {

    $("#Customers").change(function () {
        var au = $("#Customers").data("kendoAutoComplete");
        var selected = au.listView.selectedDataItems();
        if (selected.length > 0) {
             $("#CustomerID").val(selected[0].CustomerID);
        } else {
             $("#CustomerID").val("");
        }
    });

}