Implementing Autocomplete as a hideable listview (demo included)

Question

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.

I've implemented a proof of concept here using a mobile list view:

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

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.

Question

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

1. The datasource can be set/unset as needed.
2. The "favorites" can be invisible/visible as needed

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)

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.

Answer 1

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

(demo)

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.