I was studying typeahead.js
with bootstrap 3
, and I'm trying to do a auto-complete that makes a request on the server to bring the list options.
This is the plugin I'm using: GitHub Bootstrap 3 Typeahead
This is the function I use to create auto complete:
$(function(){
var options = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'loadNameChoices',
replace: function(url, uriEncodedQuery) {
return url + '?input=' + uriEncodedQuery
},
}
});
options.initialize();
$('#nome').typeahead({source:options.ttAdapter()});
})
When typing a letter in the field, the request is done on the server, which returns a json with the names. But autocomplete does not work.
What is the correct way to implement this remote autocomplete?
My back-end is done with grails tag. And on the front end I use bootstrap3
+ jquery . p>
This is the service that returns the json with the names . This service works correctly.
def loadNameChoices(){
render(contentType: "application/json") {
service.loadNames(params['input'])
}
}
If I simply do:
$('#nome').typeahead({
source: ['TESTE','TESTE']
});
Autocomplete works. I think it's a problem with Bloodhound