如何为kendoAutoComplete配置JSON数据源？

问题原因 #

当数据源为对象数组时，Kendo AutoComplete默认无法识别要展示对象中的具体字段，因此直接输出对象的字符串形式[object Object]。只需指定dataTextField属性，明确要显示的字段即可解决。

修正后的代码 #

添加dataTextField: "EmployeeName"配置项，指定展示员工的全名，同时保留原有正确的JSONP数据源配置：

<p>Search Member: <input id="member-auto-complete" /></p>

<script>
  $('#member-auto-complete').kendoAutoComplete({
    dataTextField: "EmployeeName", // 指定要显示的字段
    dataSource: {
      transport: {
        read: {
          url: './content/employees-list.json',
          crossDomain: true,
          dataType: "jsonp",
          jsonp: false,
          jsonpCallback: "callback_el"
        }
      }
    }  
  });
</script>

补充说明 #

• dataTextField是Kendo AutoComplete的核心配置，用于定义从数据源对象中提取哪个字段作为显示文本，对应你JSON文件中的EmployeeName字段。
• 你的JSONP文件使用callback_el作为回调函数名，与配置中的jsonpCallback值一致，这部分无需修改。

内容的提问来源于stack exchange，提问作者Frankie