Changes to extend the render functionality of the typeahead plugin.

Created by: AnthonyWlodarski

I've added a one liner that allows you to extend the render functionality of the typeahead plugin. We have found a use case that when we render compound data the process function still use the internal render function that requires the data being passed into the process callback be a string however we use an array of data and need a way to render the data as fitting.

Irrespective of the data being passed in, it would be a nice to have to be able to determine how to render strings or any data being passed into the process callback.

// custom matcher function because we are passing in an array of data
matcher: function(item) {
        item = item[1] + ' ' + item[3]
        return ~item.toLowerCase().indexOf(this.query.toLowerCase())
},
// custom sorter to deal with the array of data
sorter: function(items) {
        var beginswith = []
                , caseSensitive = []
                , caseInsensitive = []
                , item
        while (item = items.shift()) {
                var test = item[1] + ' ' + item[3]
                if (!test.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
                else if (~test.indexOf(this.query)) caseSensitive.push(item)
                else caseInsensitive.push(item)
        }
        
        return beginswith.concat(caseSensitive, caseInsensitive)
},
// highlighter remains the same but can be expanded to support arrays
highlighter: function (item) {
        var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
        return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '' + match + ''
        })
},
// custom render function not possible if we do not allow the function to be
// overwritten in the options call for the typeahead plugin
render: function (items) {
        var that = this
        items = $(items).map(function (i, item) {
                console.log(item)
                i = $(that.options.item).attr('data-value', item[1] + ' ' + item[3]).attr('data-creatorId', item[0])
                i.find('a').html(that.highlighter(item[1] + ' ' + item[3]))
                return i[0]
        })

        items.first().addClass('active')
        this.$menu.html(items)
        return this
},