Kendo AutoComplete does not re-query the datasource when retyping search string

Question

I have a problem with the Kendo AutoComplete widget.

I am trying it to query the datasource after the user has entered the first two characters of their search. On the server (web api) I restrict the search using those two chars and all is well, i.e. a subset is returned and correctly shown and further filtered if I carry on typing in the search.

However, I then retype a new search entry which is no longer firing back to the datasource so I am stuck with the data that was retrieved from the first query.

How do I go about this properly?

Thanks

Here is my test code:

public class AlbumsController : ApiController
{
    HttpRequest _request = HttpContext.Current.Request;

    // GET api/albums
    public IEnumerable<Album> GetForAutoComplete()
    {
        string sw = _request["sw"] == null ? "" : _request["sw"].ToString();

        var query = (from a in Albums.MyAlbums
                     where a.Title.ToLower().StartsWith(sw)
                     orderby a.Title
                     select a).ToArray();

        return query;
    }

and my javascript on the client is like this:

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/Albums/GetForAutoComplete",
                data: {
                    sw: function () {
                        return $("#albumSearch").data("kendoAutoComplete").value();
                    }
                }
            }

        }

    });

    $("#albumSearch").kendoAutoComplete({
        dataSource: dataSource,
        dataTextField: "Title",
        minLength: 2,
        placeholder: "type in here.."
    });

possible duplicate of [Kendo UI AutoComplete datasource transport reads only once](http://stackoverflow.com/questions/12560736/kendo-ui-autocomplete-datasource-transport-reads-only-once) — ManirajSS, Dec 24 '14 at 19:28

score 5 · Accepted Answer · answered Jan 15 '13 at 14:58

5

Set serverFiltering to true. The default is false, so it will only grab data once and assume that it now has all the data, and subsequent filtering is done on the client. To have it re-send to the server every time, add this:

var dataSource = new kendo.data.DataSource({
    serverFiltering: true, // <-- add this line.
    transport: {
        ...
    }
});

answered Jan 15 '13 at 14:58

CodingWithSpike

42,906
18
101
138

Thanks for that - I am such an idiot, I had that line but within the transport section... If only js was strongly typed... :( Just reading through some other articles you have written - nice work! – Marcel Jan 15 '13 at 15:03
Don't feel bad, I still have to refer to http://docs.kendoui.com every time I make a new DataSource just to make sure I have it in the right place :) After doing Java and C# for a decade, JS is tough without intellisense! – CodingWithSpike Jan 15 '13 at 15:05

score 0 · Answer 2 · answered Aug 20 '15 at 06:56

The code for selecting an European country while typing using kendo autocomplete from database as below:

$("#countries").kendoAutoComplete({
                        dataTextField: "yourfield",
                        filter: "startswith",       // or you can use filter: "contains",
                        minLength: 3,               //what ever you want. In my case its 0.
                        placeholder: "Select country...",
                        dataSource: {
                            type: "get",
                            serverFiltering: true,    //or can also make it false
                            transport: {
                                read: {
                                   url: "/yourController/yourAction",
                                   datatype: "json"
                                }
                          }
                    }
            });

It works fine for me.

Kendo AutoComplete does not re-query the datasource when retyping search string

2 Answers2