Kendo AutoComplete doesn't work

StackOverflow https://stackoverflow.com/questions/23251492

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"

This is my code:

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

<?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). "}";?>
Was it helpful?

Solution

When initially create the AutoComplete, it invokes a transport.read but there is no StartsWith argument so it exits without returning anything.

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:

$("#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. 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" } ] }. If you don't want to parse it, you can use parameterMap and then your AutoComplete definition would be something like:

$("#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"
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top