[TIMOB-13684] Android: Integrate ListView Search

GitHub Issue	n/a
Type	Sub-task
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2013-10-18T22:17:11.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 21, 2013 Sprint 21 API, Release 3.2.0
Components	Android
Labels	n/a
Reporter	Hieu Pham
Assignee	Hieu Pham
Created	2013-04-26T17:13:29.000+0000
Updated	2017-03-22T00:13:04.000+0000

Description

Integrating search functionalities into ListView: 1. ListView properties: searchView, searchText, caseInsensitiveSearch 2. ListItem properties: searchableText Test case for searchView, searchableText:


var sections = [];
	 
	var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
	var fruitDataSet = [
	    {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0'}},
	    {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1'}},
	    {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2'}},
	    {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3'}},
	    {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4'}},
	    {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5'}},
	];
	fruitSection.setItems(fruitDataSet);
	sections.push(fruitSection);
	 
	var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
	var vegDataSet = [
	    {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0'}},
	    {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1'}},
	    {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2'}},
	    {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3'}},
	    {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4'}},
	];
	vegSection.setItems(vegDataSet);
	sections.push(vegSection);
	 
	 
	var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
	var fishDataSet = [
	    {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0'}},
	    {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1'}},
	    {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2'}},
	    {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3'}},
	];
	fishSection.setItems(fishDataSet);
	sections.push(fishSection);
	
	var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
	var animalsDataSet = [
	    {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0'}},
	    {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1'}},
	    {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2'}},
	    {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3'}},
	];
	animalsSection.setItems(animalsDataSet);
	sections.push(animalsSection);

	var sv = Titanium.UI.createSearchBar({
	        showCancel:true,
	        height: 100,
	        top: 10,
	        hintText:'search'
	});
	
	var sv2 = Titanium.UI.createSearchBar({
	        showCancel:true,
	        height: 150,
	        top: 10,
	        hintText:'search two'
	});
	
	var button = Ti.UI.createButton({top: 100, title: "toggle searchView"});
	
	button.addEventListener('click', function(e) {
	     listView.searchView = sv2;
	});
	
	//The textfield must be a subview of the tableView to 
	//calculate correct contentInsets when keyboard is visible. 
	var listView = Ti.UI.createListView({searchView: sv, top: 250});
	listView.sections = sections;
	
	var win = Ti.UI.createWindow();
	win.add(listView);
	win.add(button);
	win.open();

1. Run code, type something in the search and to make sure its working properly. Note that each product can be search by both type and name. For instance, Apple can be lookup with either "Fruits" or "Apple" or any substrings of the two. 2. Click on button to change searchView. Test case for searchText, searchableText, caseInsensitiveSearch


var sections = [];
	 
	var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
	var fruitDataSet = [
	    {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0'}},
	    {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1'}},
	    {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2'}},
	    {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3'}},
	    {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4'}},
	    {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5'}},
	];
	fruitSection.setItems(fruitDataSet);
	sections.push(fruitSection);
	 
	var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
	var vegDataSet = [
	    {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0'}},
	    {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1'}},
	    {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2'}},
	    {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3'}},
	    {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4'}},
	];
	vegSection.setItems(vegDataSet);
	sections.push(vegSection);
	 
	 
	var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
	var fishDataSet = [
	    {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0'}},
	    {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1'}},
	    {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2'}},
	    {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3'}},
	];
	fishSection.setItems(fishDataSet);
	sections.push(fishSection);
	
	var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
	var animalsDataSet = [
	    {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0'}},
	    {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1'}},
	    {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2'}},
	    {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3'}},
	];
	animalsSection.setItems(animalsDataSet);
	sections.push(animalsSection);

	var tf = Ti.UI.createTextField({
	    color: '#336699',
	    height: '50dp',
	    top:10,
	    bottom:10,
	    left:10,
	    right:10,
	    font:{fontSize:20,fontWeight:'bold'},
	    hintText: 'Search'
	});
	
	tf.addEventListener('change',function(e){
	    listView.searchText = e.value;
	})
	
	var button = Ti.UI.createButton({top: '70dp', title: "toggle caseInsensitive"});
	
	button.addEventListener('click', function(e) {
	     if (listView.caseInsensitiveSearch) {
	     	listView.caseInsensitiveSearch = false;
	     } else {
	        listView.caseInsensitiveSearch = true;
	     }
	});
	
	//The textfield must be a subview of the tableView to 
	//calculate correct contentInsets when keyboard is visible. 
	var listView = Ti.UI.createListView({top: '150dp'});
	listView.sections = sections;
	
	var win = Ti.UI.createWindow();
	win.add(listView);
	win.add(button);
	win.add(tf);
	win.open();

1. Run code, type something in the textfield and to make sure its working properly. Note that each product can be search by both type and name. For instance, Apple can be lookup with either "Fruits" or "Apple" or any substrings of the two. 2. Click on button to toggle case sensitivity. Test case for Ti.UI.Android.SearchView:

var sections = [];
       
    var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
    var fruitDataSet = [
        {properties: { title: 'Apple', searchableText:' Fruits Apple', itemId:'0 0'}},
        {properties: { title: 'Banana', searchableText:'Fruits Banana', itemId:'0 1'}},
        {properties: { title: 'Cantaloupe', searchableText:'Fruits Cantaloupe', itemId:'0 2'}},
        {properties: { title: 'Fig', searchableText:'Fruits Fig', itemId:'0 3'}},
        {properties: { title: 'Guava', searchableText:'Fruits Guava', itemId:'0 4'}},
        {properties: { title: 'Kiwi', searchableText:'Fruits Kiwi', itemId:'0 5'}},
    ];
    fruitSection.setItems(fruitDataSet);
    sections.push(fruitSection);
       
    var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
    var vegDataSet = [
        {properties: { title: 'Carrots', searchableText:'Vegetables Carrots', itemId:'1 0'}},
        {properties: { title: 'Potatoes', searchableText:'Vegetables Potatoes', itemId:'1 1'}},
        {properties: { title: 'Corn', searchableText:'Vegetables Corn', itemId:'1 2'}},
        {properties: { title: 'Beans', searchableText:'Vegetables Beans', itemId:'1 3'}},
        {properties: { title: 'Tomato', searchableText:'Vegetables Tomato', itemId:'1 4'}},
    ];
    vegSection.setItems(vegDataSet);
    sections.push(vegSection);
       
       
    var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
    var fishDataSet = [
        {properties: { title: 'Cod', searchableText:'Fish Cod', itemId:'2 0'}},
        {properties: { title: 'Haddock', searchableText:'Fish Haddock', itemId:'2 1'}},
        {properties: { title: 'Salmon', searchableText:'Fish Salmon', itemId:'2 2'}},
        {properties: { title: 'Tuna', searchableText:'Fish Tuna', itemId:'2 3'}},
    ];
    fishSection.setItems(fishDataSet);
    sections.push(fishSection);
      
    var animalsSection = Ti.UI.createListSection({ headerTitle: 'Animals'});
    var animalsDataSet = [
        {properties: { title: 'Deer', searchableText:'Animals Deer', itemId:'3 0'}},
        {properties: { title: 'Dog', searchableText:'Animals Dog', itemId:'3 1'}},
        {properties: { title: 'Cat', searchableText:'Animals Cat', itemId:'3 2'}},
        {properties: { title: 'Elephant', searchableText:'Animals Elephant', itemId:'3 3'}},
    ];
    animalsSection.setItems(animalsDataSet);
    sections.push(animalsSection);
  
    var sv = Titanium.UI.createSearchBar({
            showCancel:true,
            height: 100,
            top: 10,
            hintText:'search'
    });
      
    var sv2 = Titanium.UI.createSearchBar({
            showCancel:true,
            height: 150,
            top: 10,
            hintText:'search two'
    });
  
    var sv3 = Ti.UI.Android.createSearchView({
        hintText: "Search View",
        height: 150,
        top: 10
    });
      
    var button = Ti.UI.createButton({top: 100, title: "toggle searchView"});
      
    var num = 1;
    button.addEventListener('click', function(e) {
         if (num%3 == 1) {
             listView.searchView = sv2;
         } else if (num%3 == 2) {
            listView.searchView = sv3;
         } else {
            listView.searchView = sv;
         }
         num ++;
    });
      
    //The textfield must be a subview of the tableView to 
    //calculate correct contentInsets when keyboard is visible. 
    var listView = Ti.UI.createListView({searchView: sv, top: 250});
    listView.sections = sections;
     
    listView.addEventListener('itemclick', function(e){
        alert(
         "ItemId: " + e.itemId + "\n" +
         "BindId: " + e.bindId + "\n" +
         "Section Index: " + e.sectionIndex + ", Item Index: " + e.itemIndex
        );    
    });
      
    var win = Ti.UI.createWindow();
    win.add(listView);
    win.add(button);
    win.open();

1. Click on 'toggle searchView' to toggle between different searchViews. Make sure the search functionality works for all searchView types.

Comments

Hieu Pham 2013-10-16

Master PR: https://github.com/appcelerator/titanium_mobile/pull/4774
Hieu Pham 2013-10-17

keepSectionsInSearch PR: https://github.com/appcelerator/titanium_mobile/pull/4798 Remove 'keepSectionsInSearch' PR: https://github.com/appcelerator/titanium_mobile/pull/4809. KS 'keepSectionsInSearch' remove PR: https://github.com/appcelerator-developer-relations/KitchenSink/pull/136 However, section's headers and footers will hide automatically during search if there are no elements being displayed in the section.
Ping Wang 2013-10-18

Reopen the ticket because for the property "keepSectionsInSearch", Android has a different behavior with iOS.
Lee Morris 2017-03-22

Closing ticket as fixed.

JSON Source