Evento change não é disparado ao digitar
20/01/2016 14:28
1
Boa tarde pessoal.

Estou postando essa dúvida aqui, por se tratar de uma página .gsp , apesar de ter 99% de certeza que o problema não é com o grails. Moderadores, caso achem que a dúvida não é pertinente ao fórum, sintam-se a vontade para apagar o tópico.

Estou tentando implementar um autocomplete utilizando o typeahead.js. Atribui um evento de change ao meu input para fazer uma requisição ajax que me traz os dados que serão exibidos na lista.

Porém, quando a tela é carregada e eu digito alguma coisa o meu evento não é disparado. Se eu tirar o foco do componente e digitar novamente o evento também não é disparado. Ele é disparado somente quando eu clico na barra de endereços, ou mudo de aba no navegador ou de janela. Após o evento ser disparado pela primeira vez, toda vez que digito alguma coisa o evento é disparado normalmente. Esse comportamente está bizarro e não sei como resolver.

?<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout" />
<asset:javascript src="bootstrap3-typeahead.min.js"/>
<script type='text/javascript'>
$(function(){
$("#nome").change(function(){
var input = $(this).val()
$.ajax({
url: "loadNameChoices",
type: "get",
data:{input:input},
contentType: 'application/json',
success: function(response) {
$("#nome").typeahead({source:response});
},
});
});
});
</script>
</head>

<body>
<div class="container-fluid">
<div class="panel panel-primary">
<g:form name="formBusca" class="form-inline">
<div class="panel-body">
<div class="form-group">
<label>Nome:</label>
<g:textField id="nome" name="nome" class=" typeahead form-control" autocomplete="off"/>
</div>
<div class="form-group">
<label>Usuário:</label>
<g:textField id="username" name="username" class="form-control" autocomplete="off"/>
</div>
</div>
<div class="panel-footer">
<div class="text-right">
<button type="button" class="btn btn-default btn-sm" id="search-button">Pesquisar</button>
<g:link action="form" class="btn btn-default btn-sm">Novo</g:link>
</div>
</div>
</g:form>
</div>
</div>
</body>
</html>

Tags: Grails, JQuery, Javascript, Autocomplete


0
Oi Anderson, é uma falha no seu javascript.

Na realidade, não é o evento change que você deve usar, mas sim keyup ou keypress ou keydown.


0
Kico
Entendi. Mas o evento change não é disparado quando eu mudo o valor de um componente?? Faz sentido eu utilizar eventos do tipo keypress, mas ai terei que me preocupar com quais teclas o usuario apertou. Pq não quero por exemplo disparar um evento ajax se o usuário apertar um TAB ou um Shift. Existe alguma outra forma mais aconselhada para essas situações? (Javascript não é muito meu forte rs.)


0
Oi Anderson,

se não me engano, o onchange só vai ser chamado, no caso de campos do tipo textual quando o foco é transferido para outro elemento.


1
?Kico
É exatamente isso que você falou. Postei essa dúvida lá no StackOverflow tb e deram uma resposta bem bacana. Sugeriram o evento do tipo 'input' que é exatamente o que estava precisando. Vou deixar o link aqui caso alguém se interesse.

Evento change só é disparado ao mudar aba ou mudar de janela?Obrigado pela ajuda! Alias, toda vez que posto alguma dúvida aqui no fórum sou respondido muito rápido, e isso é muito legal. Parabéns!


0
Oi Anderson, obrigado!



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto