Marcel
Marcel

Reputation: 2158

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

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

Upvotes: 4

Views: 4582

Answers (2)

Niraj
Niraj

Reputation: 41

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.

Upvotes: 0

CodingWithSpike
CodingWithSpike

Reputation: 43728

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: {
        ...
    }
});

Upvotes: 5

Related Questions