FilterList

From WebOS101

Filter List

<div x-mojo-element='FilterList' id='myFilterList'></div>

Setup Widget:

this.contoller.setupWidget('myFilterList',
	{
		itemTemplate: 'myScene/itemTemplate', // see standard List widget
		swipeToDelete: false,
		reorderable: false,
		filterFunction: this.filterTheList.bind(this),
		delay: 1000 //1 second delay before filter string is used
	},
	this.filterListModel = {
			disabled: false
	}
);

For this example, the data that makes up the list model's items array is stored in an array called this.myListData. Each item has a title property and a note property. The filter will check both title and note of each item, and if either contains the string typed into the filter field, will display the item.

Add a function to filter the list:

MySceneAssistant.prototype.filterTheList = function(filterString, listWidget, offset, count){
	var subset = [];
	var totalSubsetSize = 0;
 
	var i, s;
	var someList = [];  // someList will be the subset of this.myListData that contains the filterString...
 
	if (filterString !== '') {
 
		var len = this.myListData.length;
 
		//find the items that include the filterstring 
		for (i = 0; i < len; i++) {
			s = this.myListData[i];
			if (s.title.toUpperCase().indexOf(filterString.toUpperCase()) >=0) {
				//Mojo.Log.info("Found string in title", i);
				someList.push(s);
			}
			else if (s.note.toUpperCase().indexOf(filterString.toUpperCase())>=0){
				//Mojo.Log.info("Found string in note", i);
				someList.push(s);
			}
		}
	}
	else {
		Mojo.Log.info("No filter string");
		this.someTasks = this.tasks;
	}
 
	// pare down list results to the part requested by widget (starting at offset & thru count)
	var cursor = 0;
	var subset = [];
	var totalSubsetSize = 0;
	while (true) {
		if (cursor >= someList.length) {
			break;
		}
		if (subset.length < count && totalSubsetSize >= offset) {
			subset.push(someList[cursor]);
		}
		totalSubsetSize ++;
		cursor ++;
	}
 
	// use noticeUpdatedItems to update the list
	// then update the list length 
	// and the FilterList widget's FilterField count (displayed in the upper right corner)
	listWidget.mojo.noticeUpdatedItems(offset, subset);
	listWidget.mojo.setLength(totalSubsetSize);
	listWidget.mojo.setCount(totalSubsetSize);
};

Note that when updating the FilterList widget's model, you cannot call "modelChanged" as in a normal List Widget. Instead, call the filterFunction directly, with an empty filterString :

this.myListData = getListData(); // some function that will retrieve the list data!
var listWidget = this.controller.get('myFilterList');
this.filterFunction('', listWidget, 0, this.myListData.length);

FilterList in a Scroller

If you disable the scene scroller by using, for example, this.controller.stageController.pushScene({name: 'myScene', disableSceneScroller: true}); and put the FilterList inside a custom scroller, webOS has trouble finding the listWidget. The last few lines above have to be modified as follows:

//listWidget.mojo.noticeUpdatedItems(offset, subset);
	//listWidget.mojo.setLength(totalSubsetSize);
	//listWidget.mojo.setCount(totalSubsetSize);
	listWidget.mojo.getList().mojo.noticeUpdatedItems(offset, subset);
	listWidget.mojo.getList().mojo.setLength(totalSubsetSize);
	listWidget.mojo.setCount(totalSubsetSize);

Styling issues

If you have a page header, you will run into the issue of the filterField and the header residing in the same space. One possible solution is to hide the header once typing begins, but an even simpler workaround is to change the styling of the filter field to allow it to be pushed underneath the header. In your css:

.filter-field-container-height {
  height: 96px;
}

Done!