www.webOShelp.net

Example usage:

In scene view file:

<div id="searchFieldContainer">
  <div x-mojo-element="FilterList" id="startSearchField"> </div>
</div>
<div id="feedListMain">
 <!--    Rotating Feature Story      --> 
. 
. 
. 

In the scene assistant, the widget is configured by passing in the attributes of the list and specifying the filterFunction:

this.controller.setupWidget("startSearchField", 
        this.searchFieldAttr = { 
            itemTemplate: 'storyList/storyRowTemplate', 
            listTemplate: 'storyList/storyListTemplate', 
            filterFunction: this.searchList.bind(this), 
            renderLimit: 70, 
            delay: 350 
        }, 
        this.searchFieldModel = { 
            disabled: false 
        }); 
    this.controller.listen('startSearchField', Mojo.Event.listTap,
      this.viewSearchStory.bindAsEventListener(this)); 
    this.controller.listen('startSearchField', Mojo.Event.filter, 
      this.searchFilter.bind(this), true); 

This function hides the "regular" list when the user starts typing into the filterList:

//    searchFilter (FeedListAssistant) - triggered by entry into search field. 
//    First entry will hide the main feedList scene and clearing the entry 
//        will restore the scene. 
// 
FeedListAssistant.prototype.searchFilter = function(event)    { 
    if (event.filterString !== "")    { 
        $("feedListMain").hide(); 
    }    else    { 
        $("feedListMain").show(); 
    } 
}; 

The search function:

//    searchList - filter function called from search field widget to update the 
//    results list. This function will build results list by matching the 
//    filterstring to the story titles and text content, and then return the subset 
//    of the list that corresponds to the offset and size requested by the widget. 
// 
FeedListAssistant.prototype.searchList = function(filterString, listWidget, offset, count) { 
    var subset = [];          //  Ultimately the results list 
    var totalSubsetSize = 0;  //  Used to set counter in Filter Field 
    //    If search string is null, then return empty list, otherwise build results list 
    if (filterString !== "")    { 
        //    Search database for stories with the search string 
        //    and push on to the items array 
        // 
        var items = []; 
        //    Comparison function for matching strings in next for loop 
        // 
        var hasString = function(query, s) { 
            if(s.text.toUpperCase().indexOf(query.toUpperCase())>=0) { 
                return true; 
            } 
            if(s.title.toUpperCase().indexOf(query.toUpperCase())>=0) { 
                return true; 
            } 
            return false; 
        }; 
        for (var i=0; i

This function defines what happens when a user taps on a story in the resulting list:

//    viewSearchStory - triggered by tapping on an entry in the search results 
//    list. Will push the storyView scene with the searchList 
// 
FeedListAssistant.prototype.viewSearchStory = function(event)    { 
    var searchList = {title: "Search for: "+this.filter, stories: this.entireList}; 
    var storyIndex = this.entireList.indexOf(event.item); 
    Mojo.Controller.stageController.pushScene("storyView", searchList, storyIndex); 
};