Popup of the autocomplete sometimes shows no items

[Boris]

Hello,

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:

$("#institution").kendoAutoComplete({
                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
                        e.preventDefault();
                        this.close();
                    }
                    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>";
                        this.dataSource.read();
                    }
                }
            });

Thanks for your answers.

Boris

[Georgi Krustev]

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.

Regards,
Georgi Krustev
Telerik