twitter typeahead.js автозаполнение удаленный не работает

Question

У меня есть сайт с запасами. Я хотел бы добавить функциональность typeahead в мой шаблон начальной загрузки. Так как около 5000 акций и будет еще больше в будущем. Я использую haystack с индексом whoosh. Я должен использовать удаленную версию 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> 

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

добавить «„текст/JavaScript“Тип =» декларациям сценария для JQuery и начальной загрузки ,

Более современный способ объявления ваших тегов сценариев можно найти here.

2) Для инициализации машинописный вам необходимо поместить код в ваш метод 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() 
    }); 
}); 

Как в настоящее время код машинописный обыкновение напиваться.