Skip to content

Instantly share code, notes, and snippets.

@malef
Created December 20, 2011 10:07
Show Gist options
  • Save malef/1501036 to your computer and use it in GitHub Desktop.
Save malef/1501036 to your computer and use it in GitHub Desktop.
Creating table view with search bar for Titanium mobile app.
function createTableView() {
var companies, table, rows, search, previousSearch;
// Sample data
companies = [{"name":"ultrices tellus aliquam","description":"egestas sapien morbi quis adipiscing maecenas praesent luctus aptent risus ligula commodo fermentum integer in scelerisque ultrices feugiat malesuada ut feugiat torquent posuere ultricies habitasse nam"},{"name":"varius","description":"nam risus egestas augue elit venenatis felis curabitur mollis lorem tincidunt sapien feugiat mauris praesent aliquet platea suscipit ligula lobortis pulvinar malesuada"},{"name":"eros","description":"pulvinar potenti phasellus quis vestibulum blandit sed dapibus praesent cursus pretium euismod"},{"name":"diam sit eleifend","description":"aenean eleifend inceptos tempor commodo aenean primis quam interdum viverra tortor fusce fames"},{"name":"pretium","description":"pharetra non platea tortor neque gravida orci volutpat taciti etiam urna tortor pellentesque dolor dapibus aenean"},{"name":"netus ut quam","description":"sociosqu ac torquent sodales dictum varius primis molestie volutpat semper porttitor morbi a nibh elit habitasse velit ligula enim auctor nunc class ad pretium aenean placerat"},{"name":"varius","description":"libero ut faucibus porta tincidunt congue molestie taciti placerat nisi ligula sem phasellus a etiam id dictum fusce pulvinar odio"},{"name":"porttitor amet sed","description":"nisi himenaeos phasellus lorem eget pellentesque tempus pellentesque ullamcorper enim suscipit dapibus torquent ut ac justo inceptos praesent non nisl senectus imperdiet ad etiam faucibus interdum quisque"},{"name":"duis sapien scelerisque","description":"consectetur ultricies pharetra lacinia elit ante potenti varius leo litora auctor"},{"name":"rhoncus","description":"sagittis aliquam faucibus sapien ad pretium metus quisque velit neque bibendum fermentum bibendum dictum tempus ligula tellus mauris odio tempor sed metus praesent euismod mauris a nunc neque"},{"name":"mi","description":"fringilla primis metus mi sit dui duis est torquent fermentum phasellus dictumst fermentum"},{"name":"taciti","description":"lacinia etiam suspendisse porta hendrerit eu ultricies odio potenti conubia nibh maecenas pulvinar eu gravida neque velit in ad accumsan senectus laoreet tempus tellus eros cubilia sit"},{"name":"pretium turpis amet","description":"ipsum vulputate ornare lacinia vitae bibendum in morbi posuere accumsan dui"},{"name":"elit at","description":"mollis non odio pellentesque lectus vestibulum proin nibh donec inceptos taciti dictum pharetra"},{"name":"aliquet sed","description":"dictumst eget tortor a ligula ullamcorper sapien neque justo egestas nullam lacinia sollicitudin porttitor quisque imperdiet vel placerat eleifend"},{"name":"orci etiam","description":"per eros metus nec egestas consequat auctor nullam sociosqu non habitasse molestie porttitor per ultrices vivamus porta etiam arcu habitasse hac sem aenean ut etiam sem eleifend"},{"name":"elit eleifend","description":"euismod non cursus pharetra tempus elit habitant fermentum adipiscing lacus sodales eros rhoncus laoreet senectus cursus bibendum magna ipsum diam primis netus ad elementum potenti rhoncus sed libero luctus eleifend"},{"name":"rhoncus proin potenti","description":"morbi ut suscipit condimentum nec commodo platea malesuada mollis dictum nisl amet lacus luctus"},{"name":"eget","description":"auctor phasellus dapibus tortor sem cursus dapibus aenean a sem ligula justo rhoncus sagittis"},{"name":"non pellentesque","description":"cubilia leo tempus maecenas facilisis etiam ipsum congue neque metus faucibus integer donec luctus viverra odio arcu dui tellus fermentum orci phasellus habitasse cursus leo cursus mollis"}];
// Search bar
search = T.UI.createSearchBar({
showCancel: false
});
search.addEventListener('change', function (event) {
var filterRegExps = [],
filteredRows = [];
if (event.value === previousSearch) {
return;
}
previousSearch = event.value;
event.value.split(' ').forEach(function (searchWord) {
filterRegExps.push(new RegExp(searchWord, 'i'));
});
// TableViewRow.hide() and TableViewRow.show() do not work - they do not seem to have any effect.
// Also setting TableViewRow = 0 does not work as it only hides company description.
// Rows are filtered in each operation and are assigned again to a TableView.
rows.forEach(function (row) {
var filterResult;
filterResult = filterRegExps.every(function (filterRegExp) {
return filterRegExp.test(row.filter);
});
if (filterResult) {
filteredRows.push(row);
}
});
table.data = filteredRows;
});
search.addEventListener('return', function () {
search.blur();
});
search.addEventListener('cancel', function () {
search.blur();
});
// Table view rows
rows = companies.map(function (company, index) {
var row, companyName, companyDescription;
row = T.UI.createTableViewRow({
hasChild: true,
filter: [company.name, company.description].join(' '),
width: 'auto',
height: 'auto'
});
companyName = T.UI.createLabel({
font: {
fontSize: 16
},
clickName: 'companyName',
text: company.name,
top: 0,
left: 5,
width: 'auto',
height: 30
});
row.add(companyName);
companyDescription = T.UI.createLabel({
font: {
fontSize: 14
},
clickName: 'companyDescription',
text: company.description,
top: 30,
left: 5,
width: 'auto',
height: 'auto'
});
row.add(companyDescription);
return row;
});
// Table view
table = T.UI.createTableView({
data: rows,
search: search
});
return table;
}
@malef
Copy link
Author

malef commented Dec 20, 2011

Because TableViewRow.hide() and TableViewRow.show() methods don't work and other workarounds also fail in Titanium 1.7, TableView rows must be filtered and reassigned on every change of search input text. Each word is being searched separately in company name or description.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment