1

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

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

我在这里使用移动列表视图实现了概念验证：

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

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

问题

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

  1. 可以根据需要设置/取消设置数据源。
  2. “收藏夹”可以根据需要不可见/可见

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

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

4

1 回答 1

2

你可以试试这个：给你的消息一个 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，因此需要更多代码。

于 2014-05-06T12:11:20.820 回答