twitters typeahead.js not showing suggestions

Question

I've been trying to add typeahead.js functionality to my search function on my site. But it is not working even though I spent a lot of time playing with it. Site:digrin.com Lately I can't even see what I'm typing. If I uncomment this javascript code, I can see text while typing:

    <script type="text/javascript">//<![CDATA[-->
        $(document).ready(function() {
            $('.typeahead').typeahead({
                name: 'search',
                displayKey: 'name',
                remote: 'search/autocomplete/?q=%QUERY',
                minLength: 1, // send AJAX request only after user type in at least X characters
                limit: 5 // limit to show only 5 results
            });
    });//]]>
    </script>

Autocomplete remote json response: http://www.digrin.com/search/autocomplete/?q=bb Thanks for any answer in advance!

####################edit1

So thanks to zeropaper comment I included bloodhound like this:

<script type="text/javascript">//<![CDATA[-->
    $(document).ready(function() {
        var search = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: '/search/autocomplete/?q=%QUERY'
        });

        search.initialize();
        $('.typeahead').typeahead(null, {
            name: 'search',
            displayKey: 'name',
            minLength: 1, // send AJAX request only after user type in at least X characters
            limit: 5, // limit to show only 5 results
            source: search.ttAdapter()
        });
});//]]>
</script>

Now I can see text while typing, but suggestion box is still not showing up.

Answer 1

The code above is missing the Bloodhound implementation, have a look at the remote example: http://twitter.github.io/typeahead.js/examples/#remote

By the way, your CSS styles might also be conflicting (it looks odd to me at first sight).

Answer 2

Change your bloodhound implementation as below.

    var search  = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 1000,
    remote: {
        cacheKey: 'search',
        url: "http://www.digrin.com/search/autocomplete/",
        replace: function(url, query) {
               return url + "?q=" + query;
        },
        filter: function(search) {
            return $.map(search, function(data) {
                    return {
                        tokens: data.tokens,
                        symbol: data.symbol,
                        name: data.name
                }
            });
        }
    }
});