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 },