Titanium MobileでTableViewのフィルタリング

Ti.UI.SearchBarを使うとTi.UI.TableViewの絞り込みがとても簡単に実現できる。

たとえばuserの一覧を表示しているTableViewを、user.nameの値で絞り込みができるようにするには、

// SearchBarを作る
var searchBar = Ti.UI.createSearchBar({
  showCancel: false
});
searchBar.addEventListener('change', function(e) { return e.value; });
searchBar.addEventListener('return', function(e) { searchBar.blur(); });
searchBar.addEventListener('cancel', function(e) { searchBar.blur(); });

# user個々にTableViewRowを作る
var rows = [];
for (var i = 0; i < users.length; i++) {
  var user = users[i];
  var row  = Ti.UI.createTableViewRow({
      :
    # 検索用の属性をTableViewRow毎に設定する
    # 属性名は任意に設定可能
    name: user.name
  });
  rows.push(row);
}

// TableViewを作る
var tableView = Ti.UI.createTableView({
    data: rows,
    search: searchBar,  // さっき作ったSearchBarのインスタンス
    filterAttribute: 'name'  // TableViewRowに設定した検索用の属性の名前
});

window.add(tableView);

これだけでTableViewのフィルタリングができる。すごく簡単！ Titanium Mobileすごいなー。

参考

• SearchBar in Titanium