Popup of the autocomplete sometimes shows no items

2 posts, 0 answers
  1. Boris
    Boris avatar
    18 posts
    Member since:
    Aug 2015

    Posted 02 May 2016 Link to this post


    I have an autocomplete. It has filtering event handler to prevent data loading when there are less than 3 characters typed by the user. Sometimes, when I type the 3 characters very fast, popup with no items is shown. When I type the 4th character, the items appear.

    The data are loaded from the remote server, so I would say that the problem is caused by a late response from the server. But I don't know why the popup doesn't show the items after it receives the response. Or is there a way to display the popup programatically?

    This is the code that creates the autocomplete:

                    delay: 0,
                    template: "<span id='accountname'>#:name#</span><span id='accountid' style='display:none'>#:id#</span>",
                    filtering: function (e) {
                        var filter = e.filter;
                        if (!filter.value || filter.value.length < 3) { //prevent filtering if the filter is an empty string, or if the value is too short, so it would have to load many items
                        else {
                            this.dataSource.options.transport.read.data.fetchxml = "<fetch mapping='logical'> <entity name='account'> <order attribute='name'/> <filter> <condition attribute='name' value='" +
                                $("#institution").val() + "%' operator='like' /> <condition attribute='statecode' value='0' operator='eq'/> </filter> </entity> </fetch>";

    Thanks for your answers.


  2. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 04 May 2016 Link to this post

    Hello Boris,

    I noticed that you are performing custom data source read in the filtering event. This will result in unexpected behavior of the widget. I would strongly suggest you prevent the filtering event if you would like to perform such custom operations. For instance, you can always prevent filtering event:
    filtering: function (e) {
      e.preventDefault(); //always prevent the event
      //do your custom actions here

    Let me know whether this change improves the behavior of the widget.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top