Kendo AutoComplete调用API返回数据却提示No data found问题咨询

问题排查与解决方法 #

出现该问题的核心原因是kendoAutoComplete组件没有正确获取到你接口返回的有效数据，可按以下步骤排查修改：

• 检查数据源绑定逻辑
  你当前示例使用的是本地静态数组的绑定方式，实际调用远程接口时不能直接把ajax返回的数据赋值给初始化的dataSource，必须触发组件的数据源更新逻辑，优先推荐使用kendo DataSource自带的transport配置处理远程请求，示例代码如下：

  $("#autocomplete").kendoAutoComplete({
    // 若接口返回的是对象数组，需配置dataTextField为你要显示的字段名，纯字符串数组可删除该配置
    dataTextField: "address",
    dataSource: {
      transport: {
        read: function(options) {
          $.ajax({
            url: "第三方API请求地址",
            dataType: "json",
            // 把输入框当前输入的内容传给接口作为查询参数
            data: {
              keyword: options.data.filter.filters[0].value
            },
            success: function(result) {
              console.log(result); // 你之前打印的接口返回数据
              // 必须将返回的有效数据数组传入kendo的回调，组件才能识别到数据
              options.success(result);
            }
          })
        }
      }
    }
  });
  

• 如果你需要单独维护ajax请求逻辑，请求成功后要手动更新组件数据源，示例代码如下：

  // 初始化组件并获取实例
  const autoCompleteInstance = $("#autocomplete").kendoAutoComplete({
    dataTextField: "address"
  }).data("kendoAutoComplete");
  
  // 你的自定义ajax请求逻辑
  $.ajax({
    url: "第三方API请求地址",
    data: {
      keyword: $("#autocomplete").val()
    },
    success: function(res) {
      console.log(res);
      // 手动更新组件数据源，缺少这步会导致组件无法感知数据变化
      autoCompleteInstance.dataSource.data(res);
    }
  })
  

• 检查接口返回数据结构
  如果接口返回的是嵌套结构，比如{code:200, msg: "success", data: ["北京市朝阳区", "北京市海淀区"]}，你需要将实际的地址数组取出后再传给组件，不要直接传入整个返回对象，比如将上面代码中的result改为result.data即可。

问题现象参考图 #

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