Search in Listview with Alloy

mobile Titanium 3.1.3 Platform: ios7 simulator Mac OS X

Hello - I am trying to figure out how to use the search functionality with alloy in listview. Right now it does not do anything. Here is my code:

xml:

<TextField id="searchBar" />
 
<ListView id="listview" defaultItemTemplate="template">
 
            <Templates>
                <ItemTemplate name="template">  
                    <Label bindId="name" id="nameLabel" />
                    <ImageView bindId="line" id="underline" />
                    <Label bindId="vineyard" id="wineVineyard" />
                    <Label bindId="year" id="wineYear" />
                    <Label bindId="type" id="wineType" />
                    <Label bindId="location" id="wineLocation" />
                    <ImageView bindId="star1" id="rating1" />
                    <ImageView bindId="star2" id="rating2" />
                    <ImageView bindId="star3" id="rating3" />
                    <ImageView bindId="star4" id="rating4" />
                    <ImageView bindId="star5" id="rating5" />
                    <ImageView bindId="dollar" id="cost" />
                    <ImageView bindId="pic" id="winePic" />
                    <ImageView bindId="bottomLine" id="separator" />
                    <Label bindId="sampleDate" id="sampledOn"/>
                    <Label bindId="notes" id="wineNotes"/>
                    <Label bindId="id" id="wineId" />
                </ItemTemplate>
            </Templates>
 
            <ListSection id="listSection">                                      
            </ListSection>
 
        </ListView>

.js

data.push({
        properties: {height: "143dp", backgroundColor: "transparent",  searchableText: journal[i].name, caseInsensitiveSearch: true, itemId: i},
        name: {text: journal[i].name.toUpperCase(), searchableText: journal[i].name, caseInsensitiveSearch: true},
        line: {image: "/images/journal-black-line.png"},
        vineyard: {text: journal[i].maker},
        year: {text: journal[i].vintage},
        type: {text: journal[i].varietal},
        location: {text: journal[i].region},
        star1: {image: star1},
        star2: {image: star2},
        star3: {image: star3},
        star4: {image: star4},
        star5: {image: star5},
        dollar: {image: price},
        pic: {image: photo},
        bottomLine: {image: "/images/journal-black-line.png"},
        sampleDate: {text: journal[i].sampled_on},
        notes: {text: journal[i].notes},
        id: {text: journal[i].id}
        });
    } 
}
$.listSection.items = data;
 
$.searchBar.addEventListener('change', function(e){
     $.listview.searchText = e.value;
     Ti.API.info('e.value: ' + e.value);
     Ti.API.info('listview: ' + $.listview.searchText);   
});

I've tried using:

$.listview.headerView = $.searchBar;
$.listview.caseInsensitiveSearch = true;

and I've tried putting searchableText everywhere I have seen in various examples, but with no luck still. I have also tried placing a headerview directly into the xml, but it just gives me errors saying it cannot be a child view until I put in inside the itemtemplate tags, which of course creates a textfield in every list item. My Ti.API.info shows that the listview.searchText is equal to the text in the textfield, but the list will not filter...help?