Question

我正在尝试使我的Kendo数据源可过滤。这是我的代码：

var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Jane Doe", age: 30, letter: "A" },
    { name: "John Doe", age: 33, letter: "B" }
  ],
    template: "${name} ${age}",
    group: "letter",

    filterable: { placeholder: "Type to search...", field: "age" },
    fixedHeaders: true

});

HTML：

<ul data-role="listview" data-style="inset" data-template="contactsTemplate" data-source="dataSource"></ul>

搜索栏未显示。我需要以某种方式显示搜索栏。感谢。

尝试在下面的答案中使用该技术：

function setUp() {
    $("#countries").kendoAutoComplete({
    dataTextField: "age",
    filter: "contains",
    placeholder: "Search"
});
}

<input id="countries" data-source="dataSource" /><br /><br /><br />
  <ul id="flat-listview" data-role="listview" data-style="inset" data-template="contactsTemplate" data-source="dataSource"></ul>

Answer 1

据我所知，您需要使用搜索功能过滤列表视图

您需要Kendo AutoComplete作为搜索小部件

我已经为你创建了一个jsfiddler。

var Data = [{
    name: "Jane Doe",
    age: "30"
}, {
    name: "John Doe",
    age: "33"
}];

var dataSource = new kendo.data.DataSource({
    data: Data,
    pageSize: 15
});


//create AutoComplete UI component
$("#countries").kendoAutoComplete({
    dataTextField: "age",
    dataSource: dataSource,
    filter: "contains",
    placeholder: "Search"
});


$("#listView").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#template").html())
});

http://jsfiddle.net/chanaka1/512gjavv/2/

移动演示

http://jsfiddle.net/chanaka1/x09tk3xm/1/

使Kendo数据源可过滤（可搜索）

1 个答案: