Hide table rows until search is performed

Question

I have a basic SearchBar attached to a basic TableView. It works fine, but I don't want any table rows to display until the user starts typing in the search bar, so it is always filtered, and never will ALL matching rows display in the table.

var searchbar = Ti.UI.createSearchBar();

var tv = Ti.UI.createTableView({
        data: myData,
        search: searchbar,
        hideSearchOnSelection: false,
        filterAttribute: 'title',
});

How is it done?

Answer 1

You can try setting the tableView data to be empty when the page loads then set the data when the user starts typing in the searchbar, e.g.:

var searchbar = Ti.UI.createSearchBar();

searchbar.addEventListener('change', function(e){
    Ti.API.info("calling change event");
    var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];
    tv.data = tableData;
    //Remove this event listener so the data is only set once
    e.source.removeEventListener(e.type, arguments.callee);
});

var tv = Ti.UI.createTableView({
        data: [{}],
        search: searchbar,
        hideSearchOnSelection: false,
        filterAttribute: 'title',
        height:Ti.UI.SIZE
});

var win = Ti.UI.createWindow()

win.add(tv);
win.open();