twitter typeahead.js autocomplete remote not working

Question

I have a site with stocks. I would like to add typeahead functionality to my bootstrap template. Since there are about 5000 stocks and will be even more in the future. I am using haystack with whoosh index. I should be using remote version of typeahead.js, but it is not working. Could you please take a look and tell me what am I missing?

    <script type="text/javascript">
    var stocks = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 5,
        remote: {
            url: "/search/autocomplete/",
            replace: function(url, query) {
                return url + "?q=" + query;
            },
            filter: function(stocks) {
                return $.map(stocks, function(data) {
                    return {
                        tokens: data.tokens,
                        symbol: data.symbol,
                        name: data.name
                    }
                });
            }
        }
    });
    stocks.initialize();
    $('.typeahead').typeahead(null, {
            name: 'stocks',
            displayKey: 'name',
            minLength: 1, // send AJAX request only after user type in at least X characters
            source: stocks.ttAdapter()
        });
</script>

This is my form

<form class="input-prepend" method="get" action="/search/">
    <div id="remote">
        <button type="submit" class="btn">Search</button>
        <input type="text" class="typeahead" id="id_q" placeholder="Stock symbol or name" autocomplete="off" name="q">
    </div>
</form>

Urls.py

url(r'^search/autocomplete/', 'stocks.views.autocomplete'),
url(r'^search/', include('haystack.urls')),

autocomplete view

from haystack.query import SearchQuerySet
import json
def autocomplete(request):
    sqs = SearchQuerySet().autocomplete(content_auto=request.GET.get('q', ''))[:5]
    array = []
    for result in sqs:
        data = {"symbol": str(result.symbol),
                 "name": str(result.name),
                 "tokens": str(result.name).split()}
        array.insert(0, data)
    return HttpResponse(json.dumps(array), content_type='application/json')

json response:

[{"tokens": ["Arbor", "Realty", "Trus"], "symbol": "ABR", "name": "Arbor Realty Trus"}, {"tokens": ["ABM", "Industries", "In"], "symbol": "ABM", "name": "ABM Industries In"}, {"tokens": ["AmerisourceBergen"], "symbol": "ABC", "name": "AmerisourceBergen"}, {"tokens": ["ABB", "Ltd", "Common", "St"], "symbol": "ABB", "name": "ABB Ltd Common St"}, {"tokens": ["Allianceberstein"], "symbol": "AB", "name": "Allianceberstein "}]

This is my domain name: digrin.com and this is autocomplete url. What am I missing?

Answer 1

I can see two problems:

1) Your script declaration is missing a type attribute:

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<script type='text/javascript' src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

add "type='text/javascript'" to the script declarations for jquery and bootstrap.

A more modern way of declaring your script tags can be found here.

2) To initialise Typeahead you need to place the code into your jQuery ready method i.e.

$(function(){
 var stocks = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 5,
    remote: {
        url: "/search/autocomplete/",
        replace: function(url, query) {
            return url + "?q=" + query;
        },
        filter: function(stocks) {
            return $.map(stocks, function(data) {
                return {
                    tokens: data.tokens,
                    symbol: data.symbol,
                    name: data.name
                }
            });
        }
    }
});
stocks.initialize();
$('.typeahead').typeahead(null, {
        name: 'stocks',
        displayKey: 'name',
        minLength: 1, // send AJAX request only after user type in at least X characters
        source: stocks.ttAdapter()
    }); 
});

As it is currently the typeahead code wont get loaded.