Estava estudando o typeahead.js
com bootstrap 3
, e estou tentando fazer um auto-complete que faça uma requisição no servidor para trazer as opções da lista.
Esse é o plugin que estou usando: GitHub Bootstrap 3 Typeahead
Essa é a função que utilizo para criar o 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()});
})
Ao digitar uma letra no campo, a requisição é feita no servidor, que devolve um json com os nomes. Porém o autocomplete não funciona.
Qual é a maneira correta de implementar esse autocomplete remoto?
Meu back-end é feito com grails. E no front-end uso bootstrap3
+ jquery.
Esse é o serviço que devolve o json com os nomes. Esse serviço funciona corretamente.
def loadNameChoices(){
render(contentType: "application/json") {
service.loadNames(params['input'])
}
}
Se eu faço simplesmente:
$('#nome').typeahead({
source: ['TESTE','TESTE']
});
O autocomplete funciona. Creio que seja algum problema com o Bloodhound