将自动完成function实现为可隐藏的列表视图（包含演示）

我的应用程序的起始页面将有一个搜索框，以及搜索框下方的有用链接列表（collections夹等）

当有人在搜索框中键入文字时，我希望collections夹消失，只有搜索结果可见。

我在这里使用移动列表视图实现了一个概念validation ：

$("#local-filterable-listview").kendoMobileListView({ dataSource: dataSource, template: $("#mobile-listview-filtering-template").text(), filterable: { field: "ProductName", operator: "startswith" }, virtualViewSize: 100, endlessScroll: true }); 

我正在考虑而不是设置display:hidden列表视图的内容，而是我将数据源设置为null。 这“可能”是一种更好的方法。

题

如何检测搜索框中何时有文本（占位符除外）

1. 可以根据需要设置/取消设置数据源。
2. 根据需要，“collections夹”可以是不可见/可见的

我不确定的一件事是，当在搜索框中输入文本，然后我绑定数据源时……结果是什么？ 结果会被过滤，还是需要重新过滤结果？ （在Kendo UI中没有公共方法来过滤这些结果）

我会自己尝试一下，但我不知道如何检测搜索框文本是否发生了变化。 我可以轮询文本属性，但这似乎是一个不太理想的解决方案。

Answer 1

您可以尝试这样做：给您的消息一个id或一个类，以便可以选择它（在我的例子中我使用了id filterable-message ），然后创建一个这样的小部件：

 (function ($, kendo) { var ui = kendo.mobile.ui, MobileListView = ui.ListView; var MobileFilterableList = MobileListView.extend({ init: function (element, options) { var that = this; MobileListView.fn.init.call(this, element, options); this._filterableMessage = $("#filterable-message"); this.resultsVisible(false); // initially not visible $(this._filter.searchInput).on("input keyup", function () { that.resultsVisible($(this).val().trim() !== ""); }) }, resultsVisible: function (value) { if (value) { this.element.show(); this._filterableMessage.hide(); } else { this.element.hide(); this._filterableMessage.show(); } }, options: { name: "MobileFilterableList" } }); kendo.ui.plugin(MobileFilterableList); })(window.jQuery, window.kendo); 

（ 演示 ）

您还可以更改视图过滤数据源的方式而不是显示/隐藏列表，但遗憾的是处理该视图的代码（ ListViewFilter ）对ListView是私有的，因此需要更多代码。