Specifying a Data Provider Array

This is dynamic, based upon a search query for "Adobe" from twitter.com. It also has embedded HTML within each list item.

First, declare the basic HTML container <div>, then create the list, add a label function, then request data from twitter. Once data is loaded, it will be displayed within the list and formatted using the label function.

Markup

<div class="megalist" id="tweets" ></div>

Script

$(document).ready( function() {        
    $('#tweets').megalist();
    $('#tweets').megalist('setLabelFunction', listItemLabelFunction );
    $('#tweets').on('change', listChangeHandler);
    $.getScript("http://search.twitter.com/search.json?q=andytrice&rpp=50&include_entities=true&result_type=mixed&callback=dataReceived" );
});

function dataReceived( data ) {
    console.log(data);
    $('#tweets').megalist('setDataProvider', data.results )
}

function listChangeHandler( event ) { 
    var message =   "selected index: " + event.selectedIndex + "\n" + 
                    "selected item: " + event.srcElement.get()[0].outerHTML   ;
    alert( message ); 
}

function listItemLabelFunction( item ) {
    return "<div><img src='" + item.profile_image_url + "' style='float:left;margin-right:10px;'/><strong>@" + item.from_user + "</strong>: " + item.text + "</div>";
}