Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5740] TiAPI: searchBar with TableView - filtering by the starting chars

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 1.7.2, Release 1.7.3, Release 1.8.0
Fix Version/sn/a
ComponentsTiAPI
Labelsbug, filter, filters, ios, search, searchbar, tableview, tbs-1.9.0
ReporterKarol Pomaski
AssigneeEric Merriman
Created2011-10-12T14:22:55.000+0000
Updated2018-08-02T17:31:46.000+0000

Description

Feature information

Would like to be able to filter the rows by the accurate starting string.

Reproducible Steps

1. Execute this sample code 2. Put 'h' into the searchBar

Expected Result

The rows that are shown after putting the 'h' character should be the one that are starting with 'h'. Example screen shot attached.

Sample Code

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

// create table view data object
var data = [
	{title:'Alan', hasChild:true, header:'A'},
	{title:'Alice', hasDetail:true},
	{title:'Alexander'},
	{title:'Amos'},
	{title:'Alonzo'},
	{title:'Brad', header:'B'},
	{title:'Brent'},
	{title:'Billy'},
	{title:'Brenda'},
	{title:'Callie', header:'C'},
	{title:'Cassie'},
	{title:'Chris'},
	{title:'Cameron'},
	{title:'Don', header:'D'},
	{title:'Dilbert'},
	{title:'Deacon'},
	{title:'Devin'},
	{title:'Darin'},
	{title:'Darcy'},
	{title:'Erin', header:'E'},
	{title:'Erica'},
	{title:'Elvin'},
	{title:'Edrick'},
	{title:'Frank', header:'F'},
	{title:'Fred'},
	{title:'Fran'},
	{title:'Felicity'},
	{title:'George', header:'G'},
	{title:'Gina'},
	{title:'Gary'},
	{title:'Herbert', header:'H'},
	{title:'Henry'},
	{title:'Harold'},
	{title:'Ignatius', header:'I'},
	{title:'Irving'},
	{title:'Ivan'},
	{title:'Dr. J', header:'J'},
	{title:'Jefferson'},
	{title:'Jenkins'},
	{title:'Judy'},
	{title:'Julie'},
	{title:'Kristy', header:'K'},
	{title:'Krusty the Clown'},
	{title:'Klaus'},
	{title:'Larry', header:'L'},
	{title:'Leon'},
	{title:'Lucy'},
	{title:'Ludwig'},
	{title:'Mary', header:'M'},
	{title:'Mervin'},
	{title:'Malcom'},
	{title:'Mellon'},
	{title:'Ned', header:'N'},
	{title:'Nervous Eddie'},
	{title:'Nelson'},
	{title:'The Big O', header:'O'},
	{title:'Orlando'},
	{title:'Ox'},
	{title:'Pluto', header:'P'},
	{title:'Paris'},
	{title:'Potsie'}
];

var search = Titanium.UI.createSearchBar({
	showCancel:false
});
// create table view
var tableview = Titanium.UI.createTableView({
	data:data,
	search:search,
	filterAttribute:'title'
});


// add table view to the window
win1.add(tableview);

win1.open();

Associated HelpDesk Ticket

http://appc.me/c/APP-727259

Attachments

FileDateSize
expected_behavior.png2011-10-13T08:06:16.000+0000168703
searchproblem.png2011-10-12T14:22:55.000+0000132713

Comments

  1. Gabriel Tavridis 2012-06-27

    Is this a new feature or a bug?
  2. Ygor Lemos 2012-08-08

    This behaviour is expected and properly documented on Ti.UI.TableView filterAttribute documentation as seen at http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.UI.TableView-property-filterAttribute Now, I think a good feature request here would be the ability to map native NSPredicate queries into Ti.UI.TableView filter, in which case, we could use Apple's querying engine for native searchbar to improve our search and even search among other fields simultaneously with more flexible queries. Note that this is quite complex, for mapping predicates natively we would need valid instance maps of the fields values to be evaluated by Predicates, this is specially troublesome when using custom rows, thus passing as an argument to Ti.UI.TableView, a predicate parameter, in a model similar to the following:
       
       // Fixture Data
       var tableData = [
           {title:'Alan', hasChild:true, header:'A'},
           {title:'Alice', hasDetail:true},
           {title:'Alexander'},
           {title:'Amos'},
           {title:'Alonzo'},
           {title:'Brad', header:'B'},
           {title:'Brent'},
           {title:'Billy'},
           {title:'Brenda'},
           {title:'Callie', header:'C'},
           {title:'Cassie'},
           {title:'Chris'},
           {title:'Cameron'},
           {title:'Don', header:'D'},
           {title:'Dilbert'},
           {title:'Deacon'},
           {title:'Devin'},
           {title:'Darin'},
           {title:'Darcy'},
           {title:'Erin', header:'E'},
           {title:'Erica'},
           {title:'Elvin'},
           {title:'Edrick'},
           {title:'Frank', header:'F'},
           {title:'Fred'},
           {title:'Fran'},
           {title:'Felicity'},
           {title:'George', header:'G'},
           {title:'Gina'},
           {title:'Gary'},
           {title:'Herbert', header:'H'},
           {title:'Henry'},
           {title:'Harold'},
           {title:'Ignatius', header:'I'},
           {title:'Irving'},
           {title:'Ivan'},
           {title:'Dr. J', header:'J'},
           {title:'Jefferson'},
           {title:'Jenkins'},
           {title:'Judy'},
           {title:'Julie'},
           {title:'Kristy', header:'K'},
           {title:'Krusty the Clown'},
           {title:'Klaus'},
           {title:'Larry', header:'L'},
           {title:'Leon'},
           {title:'Lucy'},
           {title:'Ludwig'},
           {title:'Mary', header:'M'},
           {title:'Mervin'},
           {title:'Malcom'},
           {title:'Mellon'},
           {title:'Ned', header:'N'},
           {title:'Nervous Eddie'},
           {title:'Nelson'},
           {title:'The Big O', header:'O'},
           {title:'Orlando'},
           {title:'Ox'},
           {title:'Pluto', header:'P'},
           {title:'Paris'},
           {title:'Potsie'}
       ];
       
       var search = Titanium.UI.createSearchBar({
           showCancel:false
       });
       
       // create table view
       var tableview = Titanium.UI.createTableView({
           data:data,
           search:search,
           filterPredicate: "%title BEGINSWITH[cd] %SEARCHINPUT"
       });
       
    Where strings initiated with % or any other special character chosen by Appcelerator (that obviously wouldn't affect predicates or printf syntaxes nor compromises special chars searches, so we would need a escape char like %% for regular % char) would be special variables mapped against custom fields on the TableViewRow instances and the title field. Where %SEARCHINPUT would be the dynamic text mapped from the search field on a didChange basis (char by char), allowing realtime search matching against the predicate query, as we can do on native Objective-C. The query must obey the native format of NSPredicate syntax as in: https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Predicates/Articles/pSyntax.html#//apple_ref/doc/uid/TP40001795 Appcelerator must implement the filterPredicate parameter and proxy it against *+ predicateWithFormat:argumentArray:* evaluating it on each change of the searchBar through *- evaluateWithObject:* on each character change of the UISearchBar as per Apple Documentation on Predicates: https://developer.apple.com/library/mac/#documentation/Cocoa/Reference/Foundation/Classes/NSPredicate_Class/Reference/NSPredicate.html This would make searching on TableViews substantially more powerful, allowing for much more complex searches, mapped through a native API.

JSON Source