Lock SearchBar to the top of the TableView

Objective: Keep the SearchBar of a TableView locked to the top as the list of items are scrolled beneath it.

I have tried the following:

1- Inserting a SearchBar in a View, then apply that to the headerView of the TableView. didn't work 2- I tried playing with the top:0 of the searchBar. didn't work. kept scrolling.

I've also searched Kitchen Sink, and couldn't find an example. What I have:

var tableData = [];
 
    var tableView = Ti.UI.createTableView({
        top:0, left: 0, right: 0, bottom: 0,
        backgroundColor: '#2B0014',
    });
 
    var searchBar = Titanium.UI.createSearchBar({
        hintText: "Search by Country",
        barColor:'#000', 
        showCancel:true,
        height:43,
        top:0,
    });
 
    var Cloud = require('ti.cloud');
 
    Cloud.Places.query({
        page: 1,
        per_page: 140,
        order: 'name'
    }, function (e) {
        if (e.success) {
            //~~~ LIST the Places in a Table
            for(var i = 0; i < e.places.length; i++){
                var place = e.places[i];
                var row = Titanium.UI.createTableViewRow(dataObject: place);
                var label = Ti.UI.createLabel();
                row.add(label);
 
                tableData.push(row);
            }
            tableView.data = tableData;
 
            tableView.search = searchBar;
            tableView.searchHidden = false;
            tableView.filterAttribute = 'country';
...

Joseph,

This works for me in iOS:

var self = Ti.UI.createView({
        backgroundColor:'#fff'
    });
    var searchBar = Ti.UI.createSearchBar({top:0,height:40});
    self.add(searchBar);
    var table = Ti.UI.createTableView({top:41});
    self.add(table);

Joseph, you have to assign your searchBar object (from you example above) to the 'search' property of the tableView. Create the searchBar first, then the tableView (with the search:searchBar property). See my example code here.

HTH. Bob