Question

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

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

我使用移动列表视图implemented a proof of concept here：

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

我考虑的不是设置listview内容的display:hidden，而是将数据源设置为null。这可能＆＃34;可能＆＃34;是一个更好的方法。

问题

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

根据需要，数据源可以是set/unset。
＆＃34;收藏夹＆＃34;可以根据需要隐形/可见

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

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

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

（demo）

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

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

1 个答案: