将自动完成实现为可隐藏的列表视图(包括演示) [英] Implementing Autocomplete as a hideable listview (demo included)

问题描述

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

The start page of my application will have a search box, and a list of useful links below the searchbox (favorites etc)

当有人在搜索框中输入文本时，我希望收藏夹消失，只显示搜索结果.

When someone types text in the searchbox, I want the favorites to disappear, and only the search results to be visible.

我已经在此处使用移动列表视图实现了概念验证:

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

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

I'm considering instead of setting the display:hidden of the contents of the listview, that instead I'll set the datasource to null. This "might" be a better approach.

问题

如何检测搜索框中何时有文本(占位符除外)以便

How can I detect when there is text (other than the placeholder) in the searchbox so that

1. 数据源可以是设置/取消设置需要.
2. 收藏夹"可以根据需要隐藏/可见

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

One thing I'm unsure of, is that when the text is typed in the search box, and then I bind the datasource.. what will the result be? Will the results be filtered, or will I need to refilter the results? (there is no public method to filter these results in Kendo UI)

我会自己尝试这个，但我不知道如何检测搜索框文本是否发生变化.我可以轮询 text 属性，但这似乎不太理想.

I would try this myself, but I don't know how to detect if the searchbox text changed. I could poll the text property, but that seems like a less-than-ideal solution.

推荐答案

你可以试试这个:给你的消息一个 id 或一个类，以便它可以被选择(在我的例子中，我使用了 id filterable-message)，然后像这样创建一个小部件:

You could try this: give your message an id or a class so it can be selected (in my example I used the id filterable-message), then create a widget like this:

(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 私有的>，所以它需要更多的代码.

You could also change how the view filters the data source instead of showing/hiding the list, but unfortunately the code that handles that (ListViewFilter) is private to the ListView, so it would require more code.

这篇关于将自动完成实现为可隐藏的列表视图(包括演示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！