toggle searchbar on Titanium android tableview

Question

I have a tableview with searchbar

var tv = Titanium.UI.createTableView ({
            data: official_list,
            filterAttribute: 'title',
            backgroundColor : '#fff',
            search: search,
            searchHidden:false,
            top: '50dp'
        });

I want the searchbar to be hidden initially and only shown when searchbutton is pressed. I am using the following code for that

searchButton.addEventListener('click', function(_e) {
        search.visible = !search.visible;
        if(search.visible) {
            search.focus();
            self.softKeyboardOnFocus = 0;
        }
        else {
            Ti.UI.Android.hideSoftKeyboard();
        }
    });

The problem i am having is, even though the search gets hidden, a blank space remains in the place of searchbar.

I tried animating the coordinates of the tableview but that overrides the navigation bar and the blank space still remains. Is there anyway i can toggle the searchbar (by removing the white space also ? ).

Please help!

Answer 1

I solved the problem by creating 2 searchBar and making the searchBar in tableview coordinates out of scope. The searchbar attached to the tableview is made 1dp.

var search = Titanium.UI.createSearchBar({
        barColor:'#000', 
        showCancel:false,
        top: -50,
        height:'45dp',          
        hidden: true,
        visible: false,   
        softKeyboardOnFocus : Titanium.UI.Android.SOFT_KEYBOARD_DEFAULT_ON_FOCUS     
    }); 

var search_table = Titanium.UI.createSearchBar({
        barColor:'#000', 
        showCancel:false,
        height:'1dp',           
        hidden: true,
        visible: false,   
    });     

Now i can animate searchBar (search).

    search.visible = !search.visible;
            if(search.visible) {
                search.focus();
                self.softKeyboardOnFocus = 0;
                search.animate({
                     top: '50dp',
                     duration : 500,
                     delay : 0,  
                     curve: Titanium.UI.ANIMATION_CURVE_EASE_IN                  
                });
                tv.animate({
                     top: '90dp',
                     duration : 500,
                     delay : 0,                  
                     curve: Titanium.UI.ANIMATION_CURVE_EASE_IN
                });
            }
            else {
                Ti.UI.Android.hideSoftKeyboard();
                tv.animate({
                     top: '50dp',
                     duration : 500,
                     delay : 0,                  
                     curve: Titanium.UI.ANIMATION_CURVE_EASE_OUT
                });
            }
    });

and pass the values from searchBar to search_table ( better way was to write query for each search but i have more than 7 and instead choose passing the value to tableview.search )

    search.addEventListener('change', function(e) {
        search_table.value = e.value;
    });