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 w

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.