Typeahead issues

Question

I've started using twitters typeahead couple of days ago, and it was working perfectly while I wanted from him to show JUST one value, IE username, or something like that. And when I decided I want something more, like how on Facebook in search you have in drop-down list of results picture and next to the picture persons name and some other info, I got major problems. Tried couple of tutorials and managed to make one of the work, but only with static JSON file. I was wondering could I replace that JSON file with SQL queuery?

The code below is for text only:

$(document).ready(function() {
    var users = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'users.php?query=%QUERY'        
    });

    users.initialize();

    $('#users').typeahead({
        hint: true,
        highlight: true     
    }, {
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter()
    }); 
});

And this code is for JSON file custom display:

$(document).ready(function () {

$('.WordpressPosts').typeahead({
    name: 'Wordpress',
    prefetch: 'test2.json',
    template: [
        '<p class="repo-tag">{{tag}}</p>',
        '<p class="repo-name">{{name}}</p>',
        '<p class="repo-description">{{description}}</p>'
    ].join(''),
    engine: Hogan
    });
});

Is there anything I can do to fix my issue? Thank you in advance.

Answer 1

Ok, after I used Console to see whats wrong I figured it out. I didn't have Handlebars defined. It's working now!

I solved the problem on my own. Here is the custom java script file I made/used.

$(document).ready(function() {
    var users = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('username'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'users.php?query=%QUERY'        
    });

    users.initialize();

    $('#users').typeahead({
        hint: true,
        highlight: true     
    }, {
        name: 'users',
        displayKey: 'username',
        source: users.ttAdapter(),
        templates: {
        empty: [
        '<div style="height:50px; width:330px;">',
        'Nope',
        '</div>'
        ].join('\n'),
        suggestion: Handlebars.compile('your html code, call items with {{username}}')
        } 
    }); 
});

And files you need to include:

<script src="js/hogan.js"></script>
<script src="js/handlebars-v2.0.0.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.typeahead.js"></script>

<script src="js/typeahead.js"></script>
<script src="js/global.js"></script>