2013-01-15 21 views
2

Kendo AutoComplete小部件有问题。Kendo AutoComplete在重新键入搜索字符串时不会重新查询数据源

我试图在用户输入其搜索的前两个字符后查询数据源。 在服务器(web api)上,我使用这两个字符来限制搜索,并且一切正常,即,如果我继续输入搜索内容,则会返回一个子集并正确显示并进一步过滤。

但是,我然后重新键入一个新的搜索条目,其中不再向数据源发回,所以我被从第一个查询中检索到的数据卡住了。

我该如何解决这个问题?

感谢

这里是我的测试代码:

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; 
    } 

和我在客户端上的JavaScript是这样的:

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

可能重复的[Kendo UI自动完成数据源传输只读一次](http://stackoverflow.com/questions/12560736/kendo-ui-autocomplete-datasource-transport-reads-only-once) – ManirajSS

回答

4

设置serverFiltering为true。默认值为false,因此它只会抓取一次数据并假定它现在具有所有数据,并且随后的过滤将在客户端上完成。 有它每一次重新发送到服务器,补充一点:

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

谢谢你 - 我是这样一个白痴,我有这条线,但在运输部分......如果只有js是强类型的...... :(只是阅读你写的其他文章 - 很好的工作! – Marcel

+0

不要觉得不好,我每次我创建一个新的DataSource时,仍然必须引用http://docs.kendoui.c​​om,以确保它在正确的位置:)在完成Java和C#的十年之后,JS非常强硬,没有智能感! – CodingWithSpike

0

为同时使用剑术自动完成从数据库中下方输入选择的欧洲国家代码:

$("#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" 
           } 
          } 
        } 
      }); 

它工作正常为了我。