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

Answer 2

I think your solution do not work because the tableview is the immediate children of the window.

It should work if you enclose the tableview with another view, and then animate the tableview within the enclosing view to hide the search bar.