How to manage structured data with Bootstrap typeahead.

gistfile1.js

/* bad indentation is NetBeans' fault, camelCase is Propel's fault */
var retrieveTeachers = function(query, process) {
    // let them be json
    var transformTeachers = function(teachers) {
        return $.map(teachers, function(teacher) {
            return {
                id: teacher.Id,
                FullName: (teacher.Name + ' ' + teacher.Surname),
                // these functions allows Bootstrap typehead to use this item in places where it was expecting a string
                toString: function() {
                    return JSON.stringify(this);
                },
                toLowerCase: function() {
                    return this.FullName.toLowerCase();
                },
                indexOf: function(string) {
                    return String.prototype.indexOf.apply(this.FullName, arguments);
                },
                replace: function(string) {
                    return String.prototype.replace.apply(this.FullName, arguments);
                }
            };
        });
    }
    $.ajax({
        url: $(this)[0].$element[0].dataset.url,
        type: 'post',
        data: {query: query},
        dataType: 'json',
        success: function(data) {
            return typeof data == 'undefined' ? false : process(transformTeachers(data))
        }
    });


};

$('.teacher-typeahead').typeahead({
    source: retrieveTeachers
            , updater: function(json) {
        console.log(json);
        var item = $.parseJSON(json);
        console.log('chosen id:' + item.id);
        updateMyDiv('#lol', item);
        return item.FullName;
    }

    , items: 8
            , menu: '<ul class="typeahead dropdown-menu"></ul>'
            , item: '<li><img src="//placehold.it/40x40"/><a href="#"></a></li>'
})

Thanks for this. However if my ajax call returns the image urls how do I use them in the dropdown?