Search box in the Listview

Posted By : Siddharth Dixit | 30-Nov-2014

titanium

In this blog I would like to tell about the searching of the names from the existing data of the listview.As you have seen that in your phone if you search the particular name then the information about the particular person will come .

So similar functionality I am implementing the search box in which we you write the particular name of the person then his name is searched ,for each character that you will type in the search box the list containing the names of the person is being populated .

There's been this requirement in my project in order to search the particular names of the person and the mail will be forwarded to those which have been selected.

var win =Ti.UI.createWindow({
	backgroundColor:'white'
});
var myTemplate = {
    childTemplates: [
        {                            
            type: 'Ti.UI.Label',     
            bindId: 'names',          
            properties: {            
                color: 'black',
                font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                left: '60dp',
                top: 20,
                textAlign:"center"
            }
        },
     
    ]
};
var listView = Ti.UI.createListView({
    templates: { 'template': myTemplate },
    defaultItemTemplate: 'template',
    top:20,
});

var sections = [];

var namesSection = Ti.UI.createListSection({ headerTitle: 'Names of the person'});
var nameDataSet = [
    { names: {text: 'atul'}},
    { names: {text: 'aashish'}},
    { names: {text: 'heena'}},
    { names: {text: 'aayush'}},
    { names: {text: 'megha'}},
    { names: {text: 'rahulbhai'}},
    { names: {text: 'raghav'}},
    { names: {text: 'ajay'}},
     { names: {text: 'rohan'}},
    { names: {text: 'dhanush'}},
     { names: {text: 'raghavlal'}},
    { names: {text: 'raman'}},
        { names: {text: 'farooq'}},
    { names: {text: 'jalaj'}},
     { names: {text: 'pritam'}},
    { names: {text: 'sonali'}},
     { names: {text: 'ajit'}},
    { names: {text: 'rahul'}},
        { names: {text: 'ritesh'}},
    { names: {text: 'manohar'}},
     { names: {text: 'pranay'}},
    { names: {text: 'garima'}},
     { names: {text: 'ujjwal'}},
    { names: {text: 'mohit'}},
    
];
//To search particular person from the list of contacts
function searchedItems(key) {
	tempData = [];
	for (var j = 0; j < nameDataSet.length; j++) {
		var str = nameDataSet[j].names.text;
		var res = str.toLowerCase();
		if ((res.substring(0, key.length)) == key.toLowerCase()) {
			tempData.push(nameDataSet[j]);
		}
	}
	listView.sections[0].setItems([]);
	listView.sections[0].setItems(tempData);
}

//Adding of the searchBar to search from the existing tasks
var searchBar = Ti.UI.createSearchBar({
	barColor : "blue",
	height : 70,
	top :0,
	hintText : L("search"),
	tintColor : "#000",
	clearButtonMode : Titanium.UI.INPUT_BUTTONMODE_ALWAYS
	//showCancel : true,
});
win.add(searchBar);
listView.top = (searchBar.height + searchBar.top);
searchBar.addEventListener('change', function(e) {
	searchedItems(e.value);
	if (e.value == "")
		searchBar.blur();
	//searchBar.setShowCancel(false);
});
namesSection.setItems(nameDataSet);
sections.push(namesSection);
listView.setSections(sections);
win.add(listView);
win.open();

Thanks