I think I have around 5 hours since I'm struggling with the typeahead.js library. I'm trying to load the data using the remote functionality but I don't have any luck on making it working completely.
These are the js libraries that I'm loading:
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/handlebars-v3.0.3.js"></script>
<script src="/Scripts/typeahead.bundle.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
Then, in order to initialize my typeahead feature, I'm using this piece of code:
$(function () {
var cards = new Bloodhound({
datumTokenizer: function (datum) {
console.log(datum);
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/home/suggest?searchQuery=%QUERY',
wildcard: '%QUERY',
filter: function (response) {
return $.map(response, function (item) {
return {
value: item.Text,
tokens: item.Document
}
});
}
}
});
cards.initialize();
$(".typeahead").typeahead({
hint: true,
highlight: true,
minLength: 3
},
{
name: 'CardSearch',
displayKey: 'value',
valueKey: 'value',
source: cards.ttAdapter()
}).on('typeahead:render', function(ev, suggestion, isAsync, dsName) {
console.log(suggestion, isAsync, dsName);
}).on('typeahead:asyncreceive', function(ev, query, dsName) {
console.log(query, dsName);
});
});
From my debugging steps I realize that the remote data retrieval is working perfectly because:
a) in firefox / firebug I see the request and the response
b) I've put a console.log statement inside filter assigned function and everything is fine.
... And everything stops here... Nothing is being displayed as a dropdown list and also the hint is not working either...
What I've done next is to put some console.log statements on typeahead:render and typeahead:asyncreceive events and what I see is that all the parameters (except the jquery event) are undefined, which makes me believe that somehow, the typeahead is not being initialized correctly.
Please, if you have any idea or suggestions, give me a hint.
THANK YOU!
Later edit: This is how the generated HTML looks like:
<div class="col-sm-3 col-md-3 pull-right">
<form action="/Home/Search" class="navbar-form" method="get" role="search">
<div class="input-group">
<input class="form-control typeahead" id="query" name="query" placeholder="Search" type="text" value="" />
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
