Created
December 20, 2011 10:07
-
-
Save malef/1501036 to your computer and use it in GitHub Desktop.
Creating table view with search bar for Titanium mobile app.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.