I'm trying to make an autocomplete and I'm using Visual Studio for debugging. The autocomplete does ask for data, my code returns it then I get this from Visual Studio:
Microsoft JScript runtime error: Unable to get value of the property 'toLowerCase': object is null or undefined
function anonymous(d, __f, __o) {
return (d.Title.toLowerCase().lastIndexOf('key', 0) == 0)
}
I'm guessing it is due to d.Title being undefined... BTW: key above was the search word typed into the autocomplete.
I'm creating the autocomplete like this:
// Search box.
$(
"#searchBox"
).kendoAutoComplete({
minLength: 3,
dataTextField:
"Title"
,
//JSON property name to use
dataSource:
new
kendo.data.DataSource({
type:
"json"
,
//Specifies data protocol
pageSize: 10,
//Limits result set
transport: {
read:
"/Search"
,
parameterMap:
function
() {
return
{ title: $(
"#searchBox"
).data(
"kendoAutoComplete"
).value() };
}
}
})
});
Here is the data returned:
[{"Title":"Doctor Who: The Trial of a Time Lord"},{"Title":"Doctor Who: The Key to Time"},{"Title":"Doctor Who: The Time Meddler"},{"Title":"Doctor Who: The End of Time"}]
6 Answers, 1 is accepted
I was not able to observe the depicted issue. Check this jsFiddle demo.
I noticed that you are using parameterMap. In this case you will need to extend passed options in order to send all required options. Check the demo.
Georgi Krustev
the Telerik team

I've checked again and the data being returned is exactly as previous post.
I'm using the parameter map so the autocomplete value is added to the query string.
Is there a way to check what Kendo is receiving? According to Fiddler, the JSON returned is fine...


Using this sample, change the jQuery library to 1.9.1:
http://jsfiddle.net/krustev/Cp2uX/
My issue is the samples don't show how to work with an auto complete service with a sample URI of:
Cities/{prefixText}?c={count}
As the user changes his text value, the {prefixText} value of the uri changes.
Even more bizarre, KendoUI doesn't allow me to use the following autocomplete function in a standard input:
<script type="text/javascript">
$(function () {
$('#CityTxt').autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Content( "~/" )/Search/Cities',
type: 'GET',
cache: false,
data: request,
dataType: 'json',
success: function (json) {
// call autocomplete callback method with results
response($.map(json, function (name, val) {
return {
label: name,
value: val
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('error - ' + textStatus + ' - ' + errorThrown);
}
});
},
minLength: 2,
select: function (event, ui) {
//alert('you have selected ' + ui.item.label + ' ID: ' + ui.item.value);
$('#CityTxt').val(ui.item.label);
return false;
}
})
});
</script>
The linked jsfiddle is using a two year old version of Kendo UI which indeed doesn't work with jQuery 1.9.1. The latest Kendo UI version fully supports jquery 1.9.1: http://demos.kendoui.com/web/autocomplete/index.html
To send the autocomplete value to your service you need to set the "transport.read.data" setting of the data source:
$("#autocomplete").kendoAutoComplete({
dataSource: {
transport: {
read: {
url: "/myservice",
data: function() {
return {
autocompleteText: $("#autocomplete").data("kendoAutoComplete").value()
};
}
}
}
}
});
The other option is to specify the read option as a function:
$("#autocomplete").kendoAutoComplete({
dataSource: {
transport: {
read: function(options) {
var value = $("#autocomplete").data("kendoAutoComplete").value();
$.ajax( {
url: "myservice/" + value,
success: function(result) {
options.success(result);
}
});
}
}
}
});
Atanas Korchev
Telerik

I got it to work once I figured that "parameterMap" = "URL Query Strings". Through fiddler I noticed the KendoUI framework was injecting characters into the URL. It is a pity that the documentation isn't there for this level of detail.
I did have to tweak my URI template to match. The URI template isn't ideal, but I'll deal with it for now. I will re-factor it based upon your last section of code as that looks promising.
Original URI as prefixText is required and shouldn't be optional:
Cities/{prefixText}?c={count}
Modified URI:
Cities?p={prefixText}&c={count}
$("#City").kendoAutoComplete({
minLength: 2,
dataSource: new kendo.data.DataSource({
dataType: "json", //Specifies data protocol
serverFiltering: true, // Always go to server for new data and don't cache on client
type: "GET",
transport: {
read: WebServiceBaseUri + "AutocompleteService.svc/Cities?",
parameterMap: function (options) {
return $.extend(options, {
p: $("#City").val()
});
}
}
})
});