ListView with SearchBar Example (pulling from Appcelerator ACS)

index.js

var _args = arguments[0] || {};

var Cloud = require('ti.cloud');
$.listView.visible = false;


function getUsers(page){
	$.listView.visible = false;
	
	// Default to 1st Page if no page is entered
	page = page || 1;
	
	Cloud.Users.query({
		page: page,
		per_page: 25,
		order: "+last_name"
	}, updateUserList);
}

function updateUserList(data){
	
	if(data.users.length){
		
		var sections = $.listView.sections;
		var listData = [];	
		_.each(data.users, function(user){
			Ti.API.info(user.email);
			var userObj = {
				
				userName:{text: user.first_name + " " + user.last_name},
				userEmail:{text: user.email},
				userPhoto:{image: user.photo.urls.square_75},
				template: user.admin==="true" ? "adminTemplate" : "userTemplate",
				properties:{
					searchableText: user.first_name + " " + user.last_name,
				}
			};

			listData.push(userObj);
			
		});
		
		sections[0].setItems(listData);
		setTimeout(function(){
				$.listView.visible = true;
		}, 1000);
		
	}
		
}

function onItemClick(e){
	
	// Call the callback function if it exists
	_args.onClickCallback && _args.onClickCallback(e);
}

//Open the Window
$.index.open();

//Load the Table
getUsers();

index.tss

".top":{
	top:20
},

".left":{
	left:10
},

".right":{
	right:10
}

".vgroup":{
	layout:'vertical',
},

".hgroup":{
	layout:'horizontal'
},

".size":{
	height: Ti.UI.SIZE,
	width: Ti.UI.SIZE
},

".grey-line":{
	height: 1,
	backgroundColor: "#666",
	top: 20,
}

"ListView":{
	backgroundColor: "#ececec"
}

"#adminLabel":{
	font:{
		fontSize: 10,
		fontFamily:"FontAwesome",
	},
	color:"#038BC8",
	right: 10,
	top:5
},

"#userName":{
	font:{
		fontSize: 18
	},
	left: 85,
	color: "#444"
},

"#userEmail":{
	font:{
		fontSize: 14
	},
	left: 85,
	height: 20,
	color: "#666"
},

"#userTemplate":{
	height: 100,
	width: Ti.UI.FILL
}

"#userPhoto":{
	border: 1,
	borderColor: "#acacac",
	height: 75,
	width: Ti.UI.SIZE,
	top: 12,
	left: 0,
	borderRadius: 35
}

index.xml

<Alloy>
	<Window class="vgroup">
		<ListView id="listView" defaultItemTemplate="userTemplate" onItemclick="onItemClick">
			<Templates>
				
				<ItemTemplate id="userTemplate" name="userTemplate">
					<View class="left">
						<ImageView id="userPhoto" bindId="userPhoto" class="" />
						<View class="vgroup left size">
							<Label id="userName" bindId="userName" class="right" />
							<Label id="userEmail" bindId="userEmail" class="right" />
						</View>
						<Label id="userIcon" class="icon" />
					</View>
				</ItemTemplate>
				
				
				<ItemTemplate id="userTemplate" name="adminTemplate">
					<View class="left">
						<ImageView id="userPhoto" bindId="userPhoto" class="" />
						<View class="vgroup left size">
							<Label id="userName" bindId="userName" class="right" />
							<Label id="userEmail" bindId="userEmail" class="right" />
						</View>
						<Label id="adminLabel">Admin</Label>
					</View>
				</ItemTemplate>	
			</Templates>
			
			<SearchBar id="searchBar" platform="ios"/>
			<SearchView id="searchBar" platform="android"/>
			<ListSection></ListSection>
		</ListView>	 
	</Window>
</Alloy>