Kendo AutoComplete不起作用

Question

I have a problem with Kendo Autocomplete. 我遇到了剑道自动完成问题。 I am trying to search any word, but it does not work. 我试图搜索任何单词，但它不起作用。

I try to see through the console of Google Chrome, but the only error that show me is this: 我尝试通过谷歌浏览器的控制台查看，但唯一的错误告诉我的是：

"Uncaught TypeError: Cannot read property 'slice' of undefined" “未捕获的TypeError：无法读取未定义的属性'slice'”

This is my code: 这是我的代码：

HTML HTML

<HEAD>  <script src="librerias/jquery.min.js"></script>
    <script src="librerias/kendo.all.min.js"></script> 
</HEAD> 

<BODY> <input id="#autocomplete" /> </BODY>
<script>
'use strict';

(function($, kendo) {

   // select the input and create an AutoComplete
   $("#autocomplete").kendoAutoComplete({
       dataSource: new kendo.data.DataSource({
           transport: {
               read: "functions/autocomplet.php"
           },
           schema: {
               data: "data"
           }
       }),
       dataTextField: "nombre",
       placeholder: "Please Select A State"
   });

})(jQuery, kendo);
</script>

PHP PHP

<?PHPinclude ("conexion.php");  
$arr = array();
$q=$_GET["StartsWith"];
if (!$q) return;

$sql="select nombre from clientes where nombre like '%q%'";

$stmt = mysql_query($sql,$conexion);
while($row = mysql_fetch_array($stmt)) {
    $arr[] = $row['nombre'];
}

// add the header line to specify that the content type is JSON
header("Content-type: application/json");

echo "{\"data\":" .json_encode($arr). "}";?>

Answer 1

When initially create the AutoComplete, it invokes a transport.read but there is no StartsWith argument so it exits without returning anything. 在最初创建AutoComplete时，它会调用transport.read但是没有StartsWith参数，因此退出时不返回任何内容。

You should either return an empty array: 你应该返回一个空数组：

if (!$q) {
    echo "{\"data\":" .json_encode($arr). "}";
    return;
}

or define the autocomplete to do not send a request until there is a minimum number of characters typed using minLenght : 或定义自动完成功能，直到使用minLenght键入最少数量的字符后才发送请求：

$("#autocomplete").kendoAutoComplete({
    dataSource   : new kendo.data.DataSource({
        transport: {
            read: "autocomplet.php"
        },
        schema   : {
            data: "data"
        }
    }),
    minLength    : 1,
    dataTextField: "nombre",
    placeholder  : "Please Select A State"
});

By default, AutoComplete does not use serverFiltering that means that it expects that you return everything from your PHP code and then the client filters it. 默认情况下，自动完成不使用serverFiltering这意味着它预计从您的PHP代码返回的一切，然后在客户端过滤它。 So you should do: 所以你应该这样做：

$("#autocomplete").kendoAutoComplete({
    dataSource   : new kendo.data.DataSource({
        serverFiltering: true,
        transport      : {
            read: "autocomplet.php"
        },
        schema         : {
            data: "data"
        }
    }),
    minLength    : 1,
    dataTextField: "nombre",
    placeholder  : "Please Select A State"
});

Next, the typed string is not sent as StartsWith parameter but a little more complex string, something like filter: { logic: "and", filters: [ { field: "nombre", operator: "startswith", value: "typed" } ] } . 接下来，键入的字符串不是作为StartsWith参数发送的，而是更复杂的字符串，类似于filter: { logic: "and", filters: [ { field: "nombre", operator: "startswith", value: "typed" } ] } 。 If you don't want to parse it, you can use parameterMap and then your AutoComplete definition would be something like: 如果您不想解析它，可以使用parameterMap ，然后您的AutoComplete定义将类似于：

$("#autocomplete").kendoAutoComplete({
    dataSource   : new kendo.data.DataSource({
        serverFiltering: true,
        transport      : {
            read        : "autocomplet.php",
            parameterMap: function (op) {
                return { StartsWith: op.filter.filters[0].value };
            }
        },
        schema         : {
            data: "data"
        }
    }),
    minLength    : 1,
    dataTextField: "nombre",
    placeholder  : "Please Select A State"
});

Kendo AutoComplete不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-04-23 18:55:52

Kendo AutoComplete不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-04-23 18:55:52

解决方案1
2 已采纳 2014-04-23 18:55:52