twitter typeahead.js 自动完成远程不工作

Question

我有一个股票网站。我想在我的引导模板中添加预输入功能。由于大约有5000只股票，未来还会更多。我正在使用带有嗖嗖指数的干草堆。我应该使用 typeahead.js 的远程版本，但它不工作。你能看一下并告诉我我错过了什么吗？

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

这是我的表格

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

网址.py

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

自动完成视图

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 响应：

[{"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 "}]

这是我的域名：digrin.com，这是autocomplete url。 我错过了什么？

Answer 1

我可以看到两个问题：

1) 您的脚本声明缺少类型属性：

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

在 jquery 和 bootstrap 的脚本声明中添加“type='text/javascript'”。

可以在here 找到更现代的声明脚本标签的方式。

2) 要初始化 Typeahead，您需要将代码放入您的 jQuery ready 方法中，即

$(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()
    }); 
});

由于当前是预先输入的代码，因此不会被加载。