Software, Java & afins

Um exemplo simples e rápido de como implementar autocomplete em um campo texto com Struts 2 e JQuery.

Primeiro faça o download da ultima versão do JQuery: aqui

Depois faça o download do plugin “James” para o JQuery: aqui.

Agora vamos lá…No header da página, declaramos a função do JQuery, simples assim:

<script type=”text/javascript”>
$(document).ready(function() {

$(”#destinatario”).james(”<%=request.getContextPath()%>/autocomplete.action”, { varname: “destinatario”, minlength: 3});

}
</script>

A função do James recebe como parâmetros aqui neste exemplo apenas o nome do nosso Action e o tamanho mínimo de caracteres no campo para que chamada seja feita para o servidor.  Existem diversos outros parâmetros que podem ser passados, como você poderá ver na página do plugin.

Aqui o nosso textfield, ficaria assim:

<s:textfield id=”destinatario” name=”destinatario” maxlength=”50″ size=”50″ />

Aqui o mapeamento do nosso action, retornando um JSon type:

<action name=”autocomplete” method=”listaDestinatarios”

class=”action.MeuAutocompleteAction”>

<result type=”json”>
<param name=”root”>destinatarios</param>
</result>
</action>

E na classe, precisamos de uma lista com as strings do autocomplete:

private List destinatarios = new ArrayList();
private String destinatario;

public String listaDestinatarios() {
destinatarios =  meuService.findDestinatarios(destinatario);
}

E está feito!  Quando você entrar com texto neste campo o JQuery chamará a função do James que por sua vez fará uma chamada para o seu action e colocará no autocoplete o objeto Json retornado.  Você deverá ver algo parecido com isso:

Espero ter ajudado!  E qualquer dúvida, poste seu comentário.

<action name=”essilor/buscaDestinatario” method=”listaDestinatarios”

class=”br.com.essilor.opticlick.actions.essilor.BuscaNotaFiscalAction”>

<interceptor-ref name=”defaultStack” />

<result type=”json”>

<param name=”root”>destinatarios</param>

</result>

</action>