typeahead.js - Uncaught TypeError: this.displayText(...).toLowerCase is not a function

Question

I've been messing around with typeahead.js templates. No matter what I do, I keep getting the following error:

Uncaught TypeError: this.displayText(...).toLowerCase is not a function in typeahead.min.js:2

My JavaScript looks as following:

$('#search-field').typeahead({
    display: 'value',
    templates: {
        suggestion: function(data) {
            return '<p><strong>' + data.value + '</strong> – ' + data.titleid + '</p>';
        }
    },
    source: function (query, process) {
        return $.get(root + '/api/search.php', { query: query }, function (data) {
            console.log('data:' + data); //outputs the JSON correctly.
            data = $.parseJSON(data);
            return process(data);
        });
    }
});

Where /api/search.php looks like:

[{"value":"Name1","titleid":"Test1"},{"value":"Name2","titleid":"Test2"},{"value":"Name3","titleid":"Test3"}]

I've tried copying code from other examples directly into mine, sometimes even the whole piece, but that didn't solve it either, even though it did work in the example.

How can I solve this, and get the template to work?

Answer 1

Solved the issue. Used the typeahead.js bundle for the other plugins used in the code below.

var search = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/search.php?query=%QUERY',
        wildcard: '%QUERY'
    }
});

$('#search-field').typeahead(null, {
    display: 'titleid',
    source: search,
    templates: {
        empty: [
            '<div class="empty-message">',
            'no results found.',
            '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{titleid}}</div>')
    }
});

What I've learned from this? typeahead.js is a tough plugin to use.