[TIMOB-16157] ListView Phase 2 - Templates and Search not working together

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Fixed
Resolution Date	2014-09-12T13:56:59.000+0000
Affected Version/s	n/a
Fix Version/s	2014 Sprint 01, 2014 Sprint 01 API, Release 3.2.1, Release 3.3.0
Components	iOS
Labels	ios7, listview, module_listview, qe-manualtest, sdk3.2
Reporter	Craig Jones
Assignee	Vishal Duggal
Created	2014-01-09T15:02:57.000+0000
Updated	2014-09-12T13:56:59.000+0000

Description

Comments

Darren Haligas 2014-01-09

I can confirm this behavior. My workaround was to put the search bar outside of the list view and use the searchText property when the onChange event is fired on the searchBar.

Craig Jones 2014-01-09

Hi Darren, Thanks so much for your work around, tried and tested and works a treat. Altered code below allows a neater ListView now to be implemented on my apps - thank you! However (inc AppC guys) - I'm thinking this is just a work around as I can't use searchHidden: false now?

   var self = Ti.UI.createWindow({
       backgroundColor: common.layout.backgroundColor,
       title: "Search",
       navBarHidden: false,
       layout: 'vertical'
   });
   
   //Create search bar
   var listSearch = Titanium.UI.createSearchBar({
       barColor:'#C7C7C7',
       height: 43,
       top: 0
   });
   self.add(listSearch);
   //Function to catch click event from Template
   function clickEvent (e) {
      alert(JSON.stringify(e)); 
   }//
   
   //Template with 2 labels
   var plainTemplate = {
       childTemplates: [
           {                            // Title
               type: 'Ti.UI.Label',     // Use a label for the title
               bindId: 'title',         // Maps to a custom title property of the item data
               properties: {            // Sets the label properties
                   color: '#000',
                   font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                   left: '60dp', top: 0,
               },
           },
           {                            // Subtitle
               type: 'Ti.UI.Label',     // Use a label for the subtitle
               bindId: 'subtitle',      // Maps to a custom subtitle property of the item data
               properties: {            // Sets the label properties
                   color: '#000',
                   font: { fontFamily:'Arial', fontSize: '14dp' },
                   left: '60dp', top: '25dp',
               }
           }
       ],
       // Binds a callback to the click event, which catches events bubbled by the view subcomponents.
       events: {click: clickEvent },
       properties :{
           accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
       }
   };
   
   
   //Create ListView
   var listView = Ti.UI.createListView({
       templates: { 'template': plainTemplate },
       defaultItemTemplate: 'template',
       searchHidden: false //does not work with this bodge
   });                                           
   
   
   var sections = []; //array
   
   //Fruit section
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       { title: {text: 'Apple' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Apple', properties: {title: 'Apple', subtitle: 'Sub sub label', searchableText: 'Apple', itemId: 1, accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE, canEdit: true}},
       { title: {text: 'Banana' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Banana', properties: { itemId: 2, title: 'Banana', subtitle: 'Sub sub label', searchableText: 'Banana', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE, canEdit: true}},
       {properties: { title: 'Pear', subtitle: 'Sub sub label', searchableText: 'Pear', canEdit: true}},
       {properties: { title: 'Orange', subtitle: 'Sub sub label', searchableText: 'Orange', canEdit: true}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
   
   //Veg section
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
       {properties: { title: 'Carrots', subtitle: 'Sub sub label', searchableText: 'Carrots', editing: true}},
       {properties: { title: 'Potatoes', subtitle: 'Sub sub label', searchableText: 'Potatoes', editing: true}},
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
   
   listView.sections = sections; //assign sections
   
   var indices = [{index:0, title: 'F'},
                  {index:1, title: 'V'},
                  {index:2, title: 'F'}
                 ];
   listView.sectionIndexTitles = indices; //assign indexing
               
   self.add(listView); //add to self
   
   //Example of appending Fish section
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod', subtitle: 'Sub sub label', searchableText: 'Cod'}},
       {properties: { title: 'Haddock', subtitle: 'Sub sub label', searchableText: 'Haddock'}},
   ];
   fishSection.setItems(fishDataSet);
   listView.appendSection(fishSection);
   
   
   listSearch.addEventListener('change', function(e){
        listView.searchText = e.value;
        Ti.API.info('e.value: ' + e.value);
        Ti.API.info('listview: ' + listView.searchText);   
   });
   
   
   return self;

Vishal Duggal 2014-01-09

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5199 Backport to 3_2_X https://github.com/appcelerator/titanium_mobile/pull/5200

Wilson Luu 2014-01-14

Closing ticket as fixed. Verified using the modified sample app (see below) that I was able to search for items on the list. *Tested on:* Appcelerator Studio, build: 3.2.1.201401091743 SDK build: 3.2.1.v20140110140111, 3.3.0.v20140110133250 CLI: 3.2.1-beta Alloy: 1.3.1-beta2 Xcode: 5.0.2 Devices: iphone 5 (6.1.3), iphone 5s (7.0.2), iphone 4s (7.0.4) *Note to QE*: Here is the modified sample app that I used to verify the ticket:

   var win = Ti.UI.createWindow({
       backgroundColor: 'white',
       title: "Search",
       navBarHidden: false,
       layout: 'vertical'
   });
    
   //Create search bar
   var listSearch = Titanium.UI.createSearchBar({
       barColor:'#C7C7C7',
       height: 43,
       top: 0
   });
    
   //Function to catch click event from Template
   function clickEvent (e) {
      alert(JSON.stringify(e)); 
   }//
    
   //Template with 2 labels
   var plainTemplate = {
       childTemplates: [
           {                            // Title
               type: 'Ti.UI.Label',     // Use a label for the title
               bindId: 'title',         // Maps to a custom title property of the item data
               properties: {            // Sets the label properties
                   color: '#000',
                   font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                   left: '60dp', top: 0,
               },
           },
           {                            // Subtitle
               type: 'Ti.UI.Label',     // Use a label for the subtitle
               bindId: 'subtitle',      // Maps to a custom subtitle property of the item data
               properties: {            // Sets the label properties
                   color: '#000',
                   font: { fontFamily:'Arial', fontSize: '14dp' },
                   left: '60dp', top: '25dp',
               }
           }
       ],
       // Binds a callback to the click event, which catches events bubbled by the view subcomponents.
       events: {click: clickEvent },
       properties :{
           accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
       }
   };
    
    
   //Create ListView
   var listView = Ti.UI.createListView({
       templates: { 'template': plainTemplate }, //with template theres no search bar
       defaultItemTemplate: 'template',            //comment out template and search bar works 
       searchView: listSearch,
       caseInsensitiveSearch: true,
       searchHidden: false
   });                                           
    
    
   var sections = []; //array
    
   //Fruit section
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       { title: {text: 'Apple' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Apple', properties: {title: 'Apple', subtitle: 'Sub sub label', searchableText: 'Apple', itemId: 1, accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE}},
       { title: {text: 'Banana' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Banana', properties: { itemId: 2, title: 'Banana', subtitle: 'Sub sub label', searchableText: 'Banana', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE }},
       {properties: { title: 'Pear', subtitle: 'Sub sub label', searchableText: 'Pear'}},
       {properties: { title: 'Orange', subtitle: 'Sub sub label', searchableText: 'Orange'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   //Veg section
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
   	{ title: {text: 'Carrots' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Carrots', properties: {title: 'Carrots', subtitle: 'Sub sub label', searchableText: 'Carrots', itemId: 1, accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE}},
       { title: {text: 'Potatoes' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Potatoes', properties: { itemId: 2, title: 'Potatoes', subtitle: 'Sub sub label', searchableText: 'Potatoes', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE }},
       {properties: { title: 'Carrots', subtitle: 'Sub sub label', searchableText: 'Carrots'}},
       {properties: { title: 'Potatoes', subtitle: 'Sub sub label', searchableText: 'Potatoes'}},
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   listView.sections = sections; //assign sections
    
   var indices = [{index:0, title: 'F'},
                  {index:1, title: 'V'},
                  {index:2, title: 'F'}
                 ];
   listView.sectionIndexTitles = indices; //assign indexing
                
   win.add(listView); //add to win
    
   //Example of appending Fish section
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod', subtitle: 'Sub sub label', searchableText: 'Cod'}},
       {properties: { title: 'Haddock', subtitle: 'Sub sub label', searchableText: 'Haddock'}},
   ];
   fishSection.setItems(fishDataSet);
   listView.appendSection(fishSection);
    
   win.open();

JSON Source