VRaptor + AutoComplete

27 respostas
donny

Galera, no formulário abaixo estou usando o autocomplete no input de produto. O autocomplete funciona perfeitamente. O meu problema é no momento de salvar, não estou conseguindo submeter o id do produto selecionado no autocomplete. Apenas submete o nome do produto.

Segue abaixo o código do jsp:

<form action="${linkTo[VendaController].salvar}" method="post" class="ajaxForm">
	
	
	<fieldset>
		<legend>Vendas</legend>
		<br/>
		&lt;div style="float: left; width: 100%;"&gt;
			<p>
				&lt;input type="hidden" name="venda.id" value="${venda.id}" /&gt;
				&lt;input type="hidden" name="venda.reserva.id" value="${venda.reserva.id}" /&gt;
				&lt;input id="idProduto" type="hidden" name="venda.produto.id" value="${venda.produto.id}" /&gt;
				&lt;label for="txtNome"&gt;Acomodação&lt;/label&gt;
				&lt;input type="text" id="txtNome" name="venda.acomodacao.numero" value="${venda.acomodacao.numero}" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Produto:&lt;/label&gt;
				&lt;input type="text" id="txtProduto" name="venda.produto.nome" value="${venda.produto.nome}" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Desconto:&lt;/label&gt;
				&lt;input type="text" id="txtDesconto" name="venda.desconto" value="${venda.desconto}" maxlength="255" class="input_text"  /&gt;
			</p>	
			
			<p>
				&lt;label for="txtObs"&gt;Quantidade:&lt;/label&gt;
				&lt;input type="text" id="txtQuantidade" name="venda.quantidade" value="${venda.quantidade}" maxlength="255" class="input_text"  /&gt;
			</p>						
		&lt;/div&gt;
		
		&lt;div class="divButtons"&gt;
			&lt;r:buttons delBtn="${not empty venda.id}" msgs="true"/&gt;
		&lt;/div&gt;
		
	&lt;/fieldset&gt;
&lt;/form&gt;

&lt;script type="text/javascript"&gt;

$("#txtProduto").autocomplete('&lt;c:url value="/cadastros/venda/autocomplete.json"/&gt;', {
	
	dataType: "json", // pra falar que vamos tratar um json
	parse: function(produtos) { // para tratar o json 
		// a função map vai iterar por toda a lista,
		// e transformar os dados usando a função passada
		return $.map(produtos, function(produto) {
			return {
			data: produto, // todos os dados do produto
			value: produto.id, // o valor lógico do produto
			result: produto.nome // o que vai aparecer ao selecionar
			};
		});
	},
	formatItem: function(produto) { // o que vai aparecer na lista de autocomplete
	return produto.nome + "(" + produto.valorUnitario + ")";
		}
	});
&lt;/script&gt;

Código do método salvar no meu controller:

@Transaction
	@Post("/venda/")
	public void salvar(Venda venda){
		venda.setEmpresaId(userInfo.getEmpresa().getId());
		
		validator.validate(venda);  
		 
		validator.onErrorRedirectTo(this).index();
		
		vendas.saveOrUpdate(venda);
		
		result.include(SUCCESS, SUCESS_MSG);
		result.redirectTo(this).index();
	}

O id do produto sempre está null no momento de salvar: venda.produto.id;

27 Respostas

yorgan

Pelo que entendi, nesse código você apenas seta o valor no input txtProduto.
Faltou pegar o retorno produto.id e setar no seu field idProduto.
Algo +/- assim:

$('#idProduto').val(produto.id);

[]'s
Daniel

Lucas_Cavalcanti

tem uma option que vc passa pro autocomplete que é uma função select, que vc recebe o dado selecionado e consegue preencher o id, por exemplo:

select: function(event, ui) {
                        $('#idProduto').val(ui.item.id); 
                },
donny

Fiz a sequinte alteração no código:

&lt;script type="text/javascript"&gt;

$("#txtProduto").autocomplete('&lt;c:url value="/cadastros/venda/autocomplete.json"/&gt;', {
	
	dataType: "json", // pra falar que vamos tratar um json
	parse: function(produtos) { // para tratar o json 
		// a função map vai iterar por toda a lista,
		// e transformar os dados usando a função passada
		return $.map(produtos, function(produto) {
			return {
			data: produto, // todos os dados do produto
			value: produto.id, // o valor lógico do produto
			result: produto.nome // o que vai aparecer ao selecionar
			};
		});
	},
	formatItem: function(produto) { // o que vai aparecer na lista de autocomplete
	return produto.nome + "(" + produto.valorUnitario + ")";
		},
	
	select: function(event, ui) {
		alert("id: " + ui.item.id);
         $('#idProduto').val(ui.item.id); 
 	}
	});
&lt;/script&gt;

O alerta que está dentro do option select nunca é chamado, ou seja, nnca é atribuído o id.

Também tentei usar a solução abaixo, porém funciona só a primeira vez, ao alterar o produto, o id segue sendo o anterior:

formatItem: function(produto) { // o que vai aparecer na lista de autocomplete
    $('#idProduto').val(produto.id);  
	return produto.nome + "(" + produto.valorUnitario + ")";
		},
Lucas_Cavalcanti

vc está usando esse autocomplete? http://jqueryui.com/demos/autocomplete/

donny

Estou usando o autocomplete que é explicado na apostila FJ28.

Lucas_Cavalcanti

tente atualizar para a versão do site que eu passei, que tem o callback de select

donny

Ao alterar o plugin o código parou de funcionar. Então estou tentando alterar o código. Estou usando o exemplo “Remote JSONP datasource”, porém está dando erro no path que estou passando na url. Segue o código abaixo:

&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: ('&lt;c:url value="/cadastros/venda/autocomplete.json"/&gt;', //Está dando erro nessa linha. Acho que não reconhece o &lt;c:url....
					dataType: "jsonp",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.nome
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.nome :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	&gt;&lt;/script&gt;

Segue em anexo as imagens.




Lucas_Cavalcanti

na url: vc abriu um parêntesis e não fechou

donny

Foi mal! Tentei usar a url com e sem “( )” e, em ambos casos, dá o seguinte erro no console:

self.element.propAttr is not a function
if ( self.options.disabled || self.element.propAttr( "readOnly" ) ) {
jquery...lete.js (linha 51)


Lucas_Cavalcanti

bom, primeiro troque o jsonp por só json… e não precisa mandar o print do console :wink:

donny

Blz! Alterado para “json”. Segue o mesmo erro, nem chega chamar o método no controller.

O código ficou:

&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "&lt;c:url value='/cadastros/venda/autocomplete.json'/&gt;",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.nome
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.nome :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	&lt;/script&gt;
Lucas_Cavalcanti

vc colocou o js do autocomplete novo e tirou o autocomplete antigo?

qual versão do jQuery? se eu não me engano o autocompleteUI precisa de jquery 1.5.x

donny

Sim, removi o antigo e importei o novo. Estou usando esse jQuery:

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"/&gt;&lt;/script&gt; &lt;script type="text/javascript" src="${pageContext.request.contextPath}/javascripts/jquery.ui.autocomplete.js"/&gt;&lt;/script&gt;

Lucas_Cavalcanti

http://jqueryui.com/download

tenta baixar de novo, selecionando só o autocomplete… estranho estar acontecendo isso… o $( “#txtProduto” ) existe mesmo?

donny

Fiz novamente o download, substituí o arquivo do plugin. Segue o mesmo erro.

O código do jsp:

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;


&lt;form action="${linkTo[VendaController].salvar}" method="post" class="ajaxForm"&gt;
	
	
	&lt;fieldset&gt;
		&lt;legend&gt;Vendas&lt;/legend&gt;
		<br/>
		&lt;div style="float: left; width: 100%;"&gt;
			<p>
				&lt;input type="hidden" name="venda.id" value="${venda.id}" /&gt;
				&lt;input type="hidden" name="venda.reserva.id" value="${venda.reserva.id}" /&gt;
				&lt;input id="idProduto" type="hidden" name="venda.produto.id" value="${venda.produto.id}" /&gt;
				&lt;label for="txtNome"&gt;Acomodação&lt;/label&gt;
				&lt;input type="text" id="txtNome" name="venda.acomodacao.numero" value="${venda.acomodacao.numero}" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Produto:&lt;/label&gt;
				&lt;input type="text" id="txtProduto" name="venda.produto.nome" value="${venda.produto.nome}" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Desconto:&lt;/label&gt;
				&lt;input type="text" id="txtDesconto" name="venda.desconto" value="${venda.desconto}" maxlength="255" class="input_text"  /&gt;
			</p>	
			
			<p>
				&lt;label for="txtObs"&gt;Quantidade:&lt;/label&gt;
				&lt;input type="text" id="txtQuantidade" name="venda.quantidade" value="${venda.quantidade}" maxlength="255" class="input_text"  /&gt;
			</p>						
		&lt;/div&gt;
		
		&lt;div class="divButtons"&gt;
			&lt;r:buttons delBtn="${not empty venda.id}" msgs="true"/&gt;
		&lt;/div&gt;
		
	&lt;/fieldset&gt;
&lt;/form&gt;

	&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "&lt;c:url value='/cadastros/venda/autocomplete.json'/&gt;",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.nome
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function( event, ui ) {
				log( ui.item ?
					"Selected: " + ui.item.nome :
					"Nothing selected, input was " + this.value);
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	&lt;/script&gt;
Lucas_Cavalcanti

tenta tirar as options do autocomplete (deixa só a source por enquanto) e ve se ainda dá o erro… daí vai colocando uma por uma pra ver aonde tá o erro

donny

Deixei apenas o source, e ocorre o mesmo erro:

&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "&lt;c:url value='/cadastros/venda/autocomplete.json'/&gt;",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.nome
							}
						}));
					}
				});
			}

		});
	});
	&lt;/script&gt;
Lucas_Cavalcanti

tenta usar o exemplo básico do site, aquele que já tem uma lista pre-estabelecida…

donny

Até no exemplo básico, conforme o código abaixo, segue dando o mesmo erro:

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;
&lt;form action="${linkTo[VendaController].salvar}" method="post" class="ajaxForm"&gt;
	&lt;fieldset&gt;
		&lt;legend&gt;Vendas&lt;/legend&gt;
		<br/>
		&lt;div style="float: left; width: 100%;"&gt;
			<p>
				&lt;input type="hidden" name="venda.id" value="${venda.id}" /&gt;
				&lt;input type="hidden" name="venda.reserva.id" value="${venda.reserva.id}" /&gt;
				&lt;input id="idProduto" type="hidden" name="venda.produto.id" value="${venda.produto.id}" /&gt;
				&lt;label for="txtNome"&gt;Acomodação&lt;/label&gt;
				&lt;input type="text" id="txtNome" name="venda.acomodacao.numero" value="${venda.acomodacao.numero}" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Produto:&lt;/label&gt;
				&lt;input type="text" id="txtProduto" name="venda.produto.nome" value="${venda.produto.nome}" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Desconto:&lt;/label&gt;
				&lt;input type="text" id="txtDesconto" name="venda.desconto" value="${venda.desconto}" maxlength="255" class="input_text"  /&gt;
			</p>	
			
			<p>
				&lt;label for="txtObs"&gt;Quantidade:&lt;/label&gt;
				&lt;input type="text" id="txtQuantidade" name="venda.quantidade" value="${venda.quantidade}" maxlength="255" class="input_text"  /&gt;
			</p>						
		&lt;/div&gt;
		
		&lt;div class="divButtons"&gt;
			&lt;r:buttons delBtn="${not empty venda.id}" msgs="true"/&gt;
		&lt;/div&gt;
		
	&lt;/fieldset&gt;
&lt;/form&gt;
	&lt;script&gt;
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#txtProduto" ).autocomplete({
			source: availableTags
		});
	});
	&lt;/script&gt;
Lucas_Cavalcanti

então o problema é outro :wink:

dá uma olhada no código fonte da página gerada, pra ver se não tá incluindo dois javascripts de versões diferentes da mesma lib

donny

O problema e a pecinha aki na frente do pc! Hehehe!!!

O código gerado é esse:

&lt;!DOCTYPE html&gt;
&lt;html class="no-js"&gt;
	&lt;head&gt;
		&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
		&lt;title&gt;Reservas&lt;/title&gt;

		&lt;link rel="stylesheet" type="text/css" href="/reservas/stylesheets/stylesheets.css"/&gt;
		&lt;link rel="stylesheet" href="/reservas/stylesheets/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" /&gt;
		&lt;link rel="stylesheet" type="text/css" href="/reservas/stylesheets/datatable.css"/&gt;
		&lt;link rel="stylesheet" type="text/css" href="/reservas/stylesheets/fullcalendar.css"/&gt;
		&lt;link rel="stylesheet" type="text/css" href="/reservas/stylesheets/jquery.autocomplete.css"/&gt;
		&lt;script type="text/javascript" &gt;
			var context = "/reservas";
		&lt;/script&gt;
		
	    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"/&gt;&lt;/script&gt;

	    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/i18n/jquery-ui-i18n.min.js" charset="utf-8" &gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/jquery.dataTables.min.js"/&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/cufon-yui.js"/&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/cufon-replace.js"/&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/Myriad_Pro_300.font.js"/&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/jquery.meio.mask.min.js" charset="utf-8"&gt;&lt;/script&gt;

	    &lt;script type="text/javascript" src="/reservas/javascripts/jquery.formatCurrency-1.4.0.min.js" charset="utf-8"&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/fullcalendar.min.js" charset="utf-8"&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/jquery.price_format.js" charset="utf-8"&gt;&lt;/script&gt;
	    
	    &lt;script type="text/javascript" src="/reservas/javascripts/modernizr-custom.js" charset="utf-8"&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/sssl.js" charset="utf-8"&gt;&lt;/script&gt;
	    &lt;script type="text/javascript" src="/reservas/javascripts/mousepress.js" charset="utf-8"&gt;&lt;/script&gt;

    	&lt;script type="text/javascript" src="/reservas/javascripts/polyfiller.js" charset="utf-8"&gt;&lt;/script&gt;
    	&lt;script type="text/javascript" src="/reservas/javascripts/jquery.blockUI.js"/&gt;&lt;/script&gt;
    	&lt;script type="text/javascript" src="/reservas/javascripts/jquery.form.js"/&gt;&lt;/script&gt;
    	
    	&lt;script type="text/javascript" src="/reservas/javascripts/application.js"/&gt;&lt;/script&gt;
    	&lt;script type="text/javascript" src="/reservas/javascripts/jquery.ui.autocomplete.js"/&gt;&lt;/script&gt;
    	
		&lt;!--[if lt IE 9]&gt;
			&lt;script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"&gt;&lt;/script&gt;
			&lt;script type="text/javascript" src="/reservas/javascripts/html5.js"&gt;&lt;/script&gt;
		&lt;![endif]--&gt;
		
	&lt;/head&gt;
&lt;body id="page2"&gt;
	&lt;div class="body1"&gt;
		&lt;div class="main"&gt;
			&lt;!-- header --&gt;
			&lt;header&gt;
				&lt;div id="logo_box"&gt;
					&lt;h1&gt;
						<a  >Gestor de Reservas &nbsp;&lt;span&gt;Foco
								no Cliente!&lt;/span&gt;

						</a>
					&lt;/h1&gt;
				&lt;/div&gt;
				&lt;div id="redes"&gt;
					<ul >
						<li><a ><img  >
						</a>
						</li>
						<li><a ><img  >

						</a>
						</li>
						<li><a ><img  >
						</a>
						</li>

					</ul>
				&lt;/div&gt;
				&lt;nav&gt;

					<ul >
						<li><a >Home</a>
						</li>
						<li ><a >Cadastros</a>
						</li>
						<li><a >Painel</a>
						</li>

						<li><a >Contatos</a>
						</li>
						<li ><a >Sair</a>
						</li>
					</ul>
				&lt;/nav&gt;
			&lt;/header&gt;
			&lt;!-- / header --&gt;

		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="body2"&gt;
		&lt;div class="main"&gt;
			&lt;!-- content --&gt;
			&lt;section id="content"&gt;
				&lt;div class="marg_top wrapper"&gt;
					 &lt;form action="/reservas/cadastros/venda/" method="post" class="ajaxForm"&gt;
	
	
	&lt;fieldset&gt;

		&lt;legend&gt;Vendas&lt;/legend&gt;
		<br/>
		&lt;div style="float: left; width: 100%;"&gt;
			<p>
				&lt;input type="hidden" name="venda.id" value="" /&gt;
				&lt;input type="hidden" name="venda.reserva.id" value="" /&gt;
				&lt;input id="idProduto" type="hidden" name="venda.produto.id" value="" /&gt;
				&lt;label for="txtNome"&gt;Acomodação&lt;/label&gt;

				&lt;input type="text" id="txtNome" name="venda.acomodacao.numero" value="" maxlength="255" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Produto:&lt;/label&gt;
				&lt;input type="text" id="txtProduto" name="venda.produto.nome" value="" class="input_text" required="required" /&gt;
			</p>
			
			<p>
				&lt;label for="txtObs"&gt;Desconto:&lt;/label&gt;

				&lt;input type="text" id="txtDesconto" name="venda.desconto" value="" maxlength="255" class="input_text"  /&gt;
			</p>	
			
			<p>
				&lt;label for="txtObs"&gt;Quantidade:&lt;/label&gt;
				&lt;input type="text" id="txtQuantidade" name="venda.quantidade" value="" maxlength="255" class="input_text"  /&gt;
			</p>						
		&lt;/div&gt;
		
		&lt;div class="divButtons"&gt;
	
		&lt;button type="submit" class="btnSalvar"&gt;Salvar&lt;/button&gt;		
		&lt;button id="btnPesquisar" formnovalidate="formnovalidate" class="btnPesquisar" type="submit"&gt;Pesquisar&lt;/button&gt;

&lt;button id="btnCancelar" class="btnCancelar" formnovalidate="formnovalidate" type="reset"&gt;Cancelar&lt;/button&gt;
		&lt;/div&gt;
		
	&lt;/fieldset&gt;
&lt;/form&gt;

	&lt;script&gt;
	$(function() {
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#txtProduto" ).autocomplete({
			source: availableTags
		});
	});
	&lt;/script&gt;
				&lt;/div&gt;
			&lt;/section&gt;

			&lt;!-- / content --&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="main"&gt;
		&lt;!-- footer --&gt;
		&lt;footer&gt;
			
			&lt;div class="under2"&gt;&lt;/div&gt;
			&lt;div class="wrapper font_size"&gt;
				&lt;div class="pad"&gt;

					<a  target="_blank">ReservasOn</a> designed by
					ReservasOn.com.br<br>
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/footer&gt;
		&lt;!-- / footer --&gt;
	&lt;/div&gt;
	&lt;script type="text/javascript"&gt;
		Cufon.now();
	&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Lucas_Cavalcanti

acho que o problema é isso:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"/></script>
 ...
 <script type="text/javascript" src="/reservas/javascripts/jquery.ui.autocomplete.js"/></script>

tenta tirar o ui.autocomplete… acho que ele já tá incluido no ui lá de cima.

donny

Show de bola! Era isso mesmo! Funcionou! Agora preciso descobrir como faço para pegar os dados digitados no controller. No exemplo da apostila se usava o parâmetro “String q”.

http://localhost:8082/reservas/cadastros/venda/autocomplete.json?callback=jQuery16208799252790519346_1319753928366&featureClass=P&style=full&maxRows=12&name_startsWith=ab&_=1319753933953

O texto que digitei ele passar aqui: name_startsWith=ab

Lucas_Cavalcanti

vc pode colocar o nome que vc quiser… é só colocar lá na option data do $.ajax:

data: {nomeQueVCQuer: request.term}

e no controller vc usa o mesmo nome.

donny

Ótimo!

No option select eu adicionei o $(’#idProduto’).val(ui.item.id) para setar o id no input hidden. Porém no alert exibe: select: undefined.

&lt;script&gt;
	$(function() {

		$( "#txtProduto" ).autocomplete({
			source: function( request, response ) {
				$.ajax({
					url: "&lt;c:url value='/cadastros/venda/autocomplete.json'/&gt;",
					dataType: "json",
					data: {
						featureClass: "P",
						style: "full",
						maxRows: 12,
						name_startsWith: request.term
					},
					success: function( data ) {
						response( $.map( data, function( item ) {
							return {
								label: item.nome,
								value: item.id
							}
						}));
					}
				});
			},
			minLength: 2,
			select: function(event, ui ) {
				alert("select " + ui.item.id);
				$('#idProduto').val(ui.item.id); 
			},
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
		});
	});
	&lt;/script&gt;
Lucas_Cavalcanti

esse item é o objeto que vc retornou no response… se vc quer ter ui.item.id vc tem que fazer:

response( $.map( data, function( item ) {  
  return {  
     label: item.nome,  
     value: item.id,
     id: item.id  
  }  
}));

vc pode passar qqer coisa que vc quiser =)

donny

Lucas, muito obrigado pela ajuda! Agora está funcionando perfeitamente! Abraço!

Criado 27 de outubro de 2011
Ultima resposta 27 de out. de 2011
Respostas 27
Participantes 3