Weird problem with Autocomplete

[Gabriel]

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"}]

[Georgi Krustev]

Hello Gabriel,

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.

Greetings,
Georgi Krustev
the Telerik team

[Gabriel]

Thanks for taking a look Georgi. I'm still have the same problem.

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...

[Marcus]

I was having this issue and it was because not all of my data had the correct dataTextField. In my case, there was an object with which the field I was searching for was undefined.

[Peter]

It appears that KendoUI Autocomplete doesn't work with jQuery 1.9.1.

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>

[Atanas Korchev]

Hi Peter,

 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);
                              }
                       });
                  }
            }
       }
});

Regards,
Atanas Korchev
Telerik

[Peter]

Hi Atanas,

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()
                });
              }
             }
  })
});