Weird problem with Autocomplete

7 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 07 Jan 2012 Link to this post

    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"}]
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 09 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 09 Jan 2012 Link to this post

    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...
  5. Marcus
    Marcus avatar
    1 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    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.
  6. Peter
    Peter avatar
    2 posts
    Member since:
    Jun 2013

    Posted 15 Jul 2013 Link to this post

    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>
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Peter
    Peter avatar
    2 posts
    Member since:
    Jun 2013

    Posted 18 Jul 2013 Link to this post

    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()
                    });
                  }
                 }
      })
    });
Back to Top
Kendo UI is VS 2017 Ready