Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-11604

Android: Support search widget in action bar

    Details

      Description

      To enable native-style search functionality, we should support the Android search widget (SearchView), which can be embedded in the action bar, as an alternative to the Ti SearchBar component. This could be implemented either using a lot of magic (so that if a search bar is inserted into the action bar and a table view, it appears in the action bar and acts on the table view), or it could be implemented as a separate object that can only be used in the action bar, and the user could link it up to a (hidden) search bar inserted into a table view.

      The latter approach is cleaner, but requires a little more work on the part of the user.

      Testing code:

      var searchView = Ti.UI.Android.createSearchView();
      var win = Ti.UI.createWindow({
          backgroundColor: 'blue',
          fullscreen: false,
          activity: {
              onCreateOptionsMenu: function(e) {
                  var menu = e.menu;
                  var menuItem = menu.add({
                      actionView : searchView,
                      icon: Ti.Android.R.drawable.ic_menu_search,
                      showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
                  });
                  menuItem.addEventListener("click", function(e) {
                      Ti.API.info("I was clicked");
                  });
              }
          }
      });
       
       
      // create table view data object
      var data = [];
       
      data[0] = Ti.UI.createTableViewRow({hasChild:true,title:'Row 1'});
      data[1] = Ti.UI.createTableViewRow({hasDetail:true,title:'Row 2'});
      data[2] = Ti.UI.createTableViewRow({hasCheck:true,title:'Row 3'});
      data[3] = Ti.UI.createTableViewRow({title:'Row 4'});
       
      // create table view
      var tableview = Titanium.UI.createTableView({
      	data:data,
      	search:searchView,
              searchAsChild: false
      });
       
       
      // create table view event listener
      tableview.addEventListener('click', function(e)
      {
      	// event data
      	var index = e.index;
      	var section = e.section;
      	var row = e.row;
      	var rowdata = e.rowData;
      	Titanium.UI.createAlertDialog({title:'Table View',message:'row ' + row + ' index ' + index + ' section ' + section  + ' row data ' + rowdata}).show();
      });
       
      var hide = Titanium.UI.createButtonBar({
      	labels:['Hide', 'Show'],
      	backgroundColor:'#336699',
      	height:25,
      	width:120
      });
       
       
      // add table view to the window
      win.add(tableview);
       
      hide.addEventListener('click', function(e)
      {
      	Ti.API.info("search hidden = "+tableview.searchHidden);
      	if (e.index === 0)
      	{
      		tableview.searchHidden = true;
      	}
      	else if (e.index === 1)
      	{
      		tableview.scrollToTop(0,{animated:true});
      	}
      });
       
      win.open();
      

      1. Run the above code with target API 11 - add this line in manifest section in tiapp.xml:

        <uses-sdk android:targetSdkVersion="11"/>
      

      2. Click on the search icon (top right corner) and make sure you can search for the tableview content

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                hpham Hieu Pham
                Reporter:
                aevans Arthur Evans
                Reviewer:
                Ping Wang
              • Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration