Question

在自动完成中，所选元素是对象“用户”。填写表单时，我想以某种方式将自动完成的对象设置为所选对象，即$("#" + controlId).data("kendoAutoComplete").dataItem()将返回所选对象。

$("#" + controlId).data("kendoAutoComplete").value("test")仅设置显示的内容，而不设置后面的对象。

这是定义：

$("#" + controlId).kendoAutoComplete({
    minLength: minLength,
    enforceMinLength: true,
    dataTextField: "Calculated",
    filter: "contains",
    template: '<span class="k-state-default"><p>#: data.FirstName # #: data.LastName # - #: data.Login #</p><p>#: data.Email #</p></span>',
    dataSource: {
      type: "json",
      serverFiltering: true,
      transport: {
        read: serviceUrl,
        parameterMap: function (data, type) {
          return { filter: $("#" + controlId).val() };
        }
      },
      schema: {
        parse: function (response) {
          var length = response.length;
          var dataItem;
          var idx = 0;

          for (; idx < length; idx++) {
            dataItem = response[idx];
            dataItem.Calculated = dataItem.FirstName + " " + dataItem.LastName;
          }
          return response;
        }
      }
    },
    filtering: function (e) {
      if (!e.filter.value) {
        e.preventDefault();
      }
    }
});

Answer 1

据我所知，您想在列表中选择一个现有对象，然后再使用它。

一个解决方案将是以下示例：

HTML：

  <input id="autocomplete" />
  <button onclick="addIt()">Add me</button>
  <button onclick="getIt()">Test me</button>

初始化自动完成：

$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { name: "Dzeko", nat: "Bosnia" },
    { name: "Ronaldo", nat: "Portugal" },
    { name: "Messi", nat: "Argentina" },
    { name: "Muller", nat: "Germany" },
    { name: "Mbappe", nat: "France" }
  ],
  dataTextField: "name"
});

选择并获取所选用户：

  var user = {name: "Dzeko", nat: "Bosnia" };

  var autocomplete = $("#autocomplete").data("kendoAutoComplete");

  function addIt(){
    autocomplete.search(user.name);
    autocomplete.select(autocomplete.ul.children().eq(0));
    autocomplete.trigger("change");
    autocomplete.close();
  }

  function getIt(){    
    console.log(autocomplete.dataItem());
  }

这样，您将在console.log中获得用户对象

也是可行的道场：https://dojo.telerik.com/@sehaxx/OpIvOBOY 希望对您有帮助。

Kendo AutoComplete以编程方式设置所选对象

1 个答案: