Struts + Auto Complete

gustavocoolt:

Salve galera…
Estou desenvolvendo uma aplicação em struts 1 e gostaria de implementar um “auto complete” quando o usuario digitar um texto na caixa
Andei pesquisando e vi varias maneiras de implementar com uns exemplos em php que não entedi muito bem…
Alguém poderia dar uma luz de qual a maneira mais simples de se fazer isso e o que preciso utilizar?

Obrigado

Fala ae cara tudo bem,

acho uma maneira bem simples de fazer isso com jquery-ui, essa poderosa biblioteca já faz isso para você.
Exemplo de codigo:

$(function(){

$(’#idCampo’).autocomplete({

source:“aquiSuaAction”, minLength:2,delay:0

});

});

Para usar esse exemplo o seu input que fará o autocomplete deve ter um id por exemplo “idCampo” e no script acima a mesma referencia pro id, e precisa ter as bibliotecas do jquery:

jquery-1.8.0.min.js
jquery-ui-1.8.23.custom.min.js
jquery-ui-1.8.23.custom.css esse em especial contem a folha de estilo para o auto complete.

Você pode fazer o download dessas bibliotecas direto do site http://jqueryui.com/download
pode ser a ultima versão, 1.8.3

Quando fazer o download do jquery-ui-1.8.23.custom.zip lembra se de copiar os diretorios ui-lightness a sua hierarquia para dentro do seu projeto.

Espero ter ajudado.

ajudou demais cara… vou tentar aqui
muito obrigado por enquanto !

Sebode desculpa minha ignorancia, mais como estou trabalhando com struts, o campo é html:text e eu tenho que utilizar o styleId ao invés de id correto?
Fiz um teste como vc falou em um codigo html que criei só pra testar e funcionou… mais fui implementar na minha jsp do struts e não esta funcionando
O metodo da minha action precisa retornar um array com as opções é isso?

Fala ae Gustavo,

então quanto o Struts renderiza sua pagina, o seu styleId é o id, pode ver isso que estou fanlando em exibir codigo fonte no seu browser. Faz um teste sem ser com o auto complete, por exemplo de um alert do valor de seu campo.
Tipo:

var vlr = $(’#seuId’).val();

alert(vlr);

Quanto a sua action, talves uma alternativa seria chamar uma jsp que contenha uma scriptlet e coloque sua lista em out.println(suaLista), ou outra alternativa é ter um servlet que escreve sua lista no response. Com servlet precisa de algo assim:
request.getParameter(term); valor entre parenteses é padrao jquery. esse é o valor que vc busca na sua lista de opção.

Abs.

Sebode, tentei utilizar o JSON para pegar os nomes dos clientes do BD e passar da minha action para a JSP
Segue os trechos do código:

JQuery -> http://dpaste.com/797388/
Campo -> http://dpaste.com/796015/
Action -> http://dpaste.com/796016/
Form -> http://dpaste.com/796017

Não esta funcionando… acho que fiz alguma cagada por ai hehe
Vc pode dar uma olhadinha ?

Fala ae Gustavo,

acho que vc se deu bem com jquery-ui, pois fez com muito mais detalhes do que eu…rs

Bem vamos lá, a sua action esta sendo chamada corretamente?

Se estiver o que pode esta dando problema eu acho que é no momento de escrever no response.

vc faz assim:

success : function(data, textStatus, jqXHR) {

console.log(data);

var items = data;

response(items);

sei que tentou tb com PrintWrite, mas olha como fiz bem simples…

Agora olha como eu fiz, apesar de ser uma implementaçao de Servlet bem simples…

@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

String term = request.getParameter("term");

    String[] valueBase = { "actionScript", "appleScript", "asp", "Basic",  
            "Bol", "C", "C++" };   //Aqui pode ser sua consulta de BD.

    List<String> values = new ArrayList<String>();

    if (term != null) {  // term
        for (String value : valueBase) {
            if (value.startsWith(term)) {
                values.add(value);
            }
        }
    }

   [b] Gson gson = new Gson();[/b]  // Aqui a biblioteca que uso do json, para passar o array recebido em notação json, ou seja transforma objeto JavaScript em String
    String jSon = gson.toJson(values);
    response.getWriter().write(jSon);  // Aqui escrevo meu json no response.  ESSA PARTE VC esta fazendo no javascript tente dessa forma por favor.
    response.getWriter().flush();

}

Abs,

Apenas complementando…

Essas duas formas funcionaram comigo:

String jSon = gson.toJson(values);

// response.getWriter().write(jSon);   //A principio eu havia feito assim

    PrintWriter out = response.getWriter();
    out.write(jSon); // Mas assim tb funciona....

    response.getWriter().flush();

Entao acho que o problema é no response de seu javascript no auto complete $.ajax{}

Abs

Sebode, estou conseguindo fazer em html mais no struts nao esta dando certo…

Fiz este exemplo bem simples em um html somente para testar, e ele funcionou perfeitamente… porém dentro da minha JSP do struts nao funfou, sendo que fiz as mesmas importações tanto no html qnto na minha jsp… tenho quase ctz que o meu problema é este :s

$(function() {
				
	$("#conteudoBusca").autocomplete({
		source:['andré','bianca','carolina','diego'],
		fillin:true
	});
});

Tem algo de especial que devo importar no struts ? Importei apenas aquelas bibliotecas que vc citou acima
Valeu cara

Cara no seu codigo com Struts, vc conseguiu chamar a sua action?

Cara,

neste primeiro momento fiz assim:

meu arquivo jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="/tags/struts-html" prefix="html" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Tela Principal</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
    	<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>
    	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js" ></script>
    	<script type="text/javascript" src="js/exemplo.js" ></script>
</head>
<body>
	
	
	
	<div class="ui-widget">
    	<label for="myAutocomplete">Linguagens:</label>
    	<input type="text" id="teste" />
	</div>

</body>
</html>

meu arquivo js

$(function(){
	$('#teste').autocomplete({		
		source:"inicio.do", minLength:1,delay:0
		
	});
	
});

minha ACTION:

@Override
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        super.execute(mapping, form, request, response);

        String term = request.getParameter("term");



        String[] valueBase = { "actionScript", "appleScript", "ask", "asp",
                "Basic", "Bol", "C", "C++" };

        List<String> values = new ArrayList<String>();

        if (term != null) {
            for (String value : valueBase) {
                if (value.toLowerCase().startsWith(term.toLowerCase())) {
                    values.add(value);
                }
            }
        }
        Gson gson = new Gson();
        String jSon = gson.toJson(values);

        

        response.getWriter().write(jSon);

        response.getWriter().flush();
        return null;
    }

struts-config.xml

<form-beans>
		<form-bean name="formIni" type="br.com.estudostruts.form.PrincipalForm" />
	</form-beans>
	
	<action-mappings>
		<action path="/inicio" scope="request" name="formIni" validate="false" type="br.com.estudostruts.action.PrincipalAction">
			
		</action>
	</action-mappings>

Detalhe, imagino que vc esta pensado:

Mas no jsp, o campo fico html puro, concordo, depois de fazer a escolha do autocomplete, e vc for submeter seu form da um response.getParameter(“seuCampo”)

:lol:

Ops, apenas corrigindo…rs
:roll: :roll:

request.getParameter(“seuCampo”);

e naum response.getParameter(“seuCampo”);

:lol: :lol: