I'm having trouble making typeahead work. I have been googling for a while now and nothing helped me. This is what I've done:
Tried simple official example:
<script type="text/javascript">
// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ num: 'one' },
{ num: 'two' },
{ num: 'three' },
{ num: 'four' },
{ num: 'five' },
{ num: 'six' },
{ num: 'seven' },
{ num: 'eight' },
{ num: 'nine' },
{ num: 'ten' }
]
});
// initialize the bloodhound suggestion engine
numbers.initialize();
// instantiate the typeahead UI
$('#id_q').typeahead(null, {
displayKey: 'num',
source: numbers.ttAdapter()
});
</script>
This is my input button:
<form class="form-search" method="get" action="/search/">
<div class="input-prepend">
<button type="submit" class="btn">Search</button>
<input type="text" class="span2 search-query typeahead" id="id_q" name="q" autocomplete="off" data-provide="typeahead">
</div>
</form>
And these are my includes:
<script src="{% static "js/typeahead.js/bloodhound.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.bundle.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.bundle.min.js" %}"></script>
<script src="{% static "js/typeahead.js/typeahead.jquery.js" %}"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="//raw.github.com/jharding/typeahead.js-bootstrap.css/master/typeahead.js-bootstrap.css" rel="stylesheet" media="screen">
This is complete html in case I forgot something.
What am I missing? Problem is, as I mentioned in headline, no dropdown menu appears.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
