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

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

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:

搜索栏不显示。我需要让搜索栏以某种方式显示。谢谢

尝试以下答案中的技巧：

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>

函数设置（）{
$（“#国家”）。kendoAutoComplete({
dataTextField:“年龄”，
过滤器：“包含”，
占位符：“搜索”
});
}

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

您将需要一个剑道自动完成作为搜索小部件

我已经为您创建了一个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())
});

移动演示

---

您说我需要以某种方式显示搜索栏，但问题是您希望它显示在哪里？你展示了一个模板，但什么都没说你用它做什么。似乎你的问题中缺少了一些细节…@OnaBai我需要搜索栏绝对显示任何地方。这顶帽子太棒了。是的，我的模板似乎什么也做不了。它只显示名称。我在问题中显示我的更新代码谢谢。它意味着我如何使用它，通过指定“filterable”属性，它意味着添加到搜索框中。请参阅此演示：。然而，我在寻找你的方式，因为另一种方式不起作用。我不知道你需要的是剑道移动，不管怎样，你所做的是错误的，你需要过滤移动列表视图，而不是数据源。在这里，我创建了一个移动列表视图演示，如果答案正确，请接受答案谢谢，我明天上班时会尝试。然而，我以前确实是这样做的。在js代码中实例化listview似乎总是会导致更多的问题，比如多次实例化多个搜索栏，这就是为什么我开始声明它是一个带有HTML数据角色属性的listview，而不是在js代码中实例化它。当listview使用HTML数据角色属性而不是js代码实例化时，是否可以添加该搜索栏？不认为可以通过数据属性进行筛选我试图在js代码中以编程方式将其添加到listview

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