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/>
<div style="float: left; width: 100%;">
<p>
<input type="hidden" name="venda.id" value="${venda.id}" />
<input type="hidden" name="venda.reserva.id" value="${venda.reserva.id}" />
<input id="idProduto" type="hidden" name="venda.produto.id" value="${venda.produto.id}" />
<label for="txtNome">Acomodação</label>
<input type="text" id="txtNome" name="venda.acomodacao.numero" value="${venda.acomodacao.numero}" maxlength="255" class="input_text" required="required" />
</p>
<p>
<label for="txtObs">Produto:</label>
<input type="text" id="txtProduto" name="venda.produto.nome" value="${venda.produto.nome}" maxlength="255" class="input_text" required="required" />
</p>
<p>
<label for="txtObs">Desconto:</label>
<input type="text" id="txtDesconto" name="venda.desconto" value="${venda.desconto}" maxlength="255" class="input_text" />
</p>
<p>
<label for="txtObs">Quantidade:</label>
<input type="text" id="txtQuantidade" name="venda.quantidade" value="${venda.quantidade}" maxlength="255" class="input_text" />
</p>
</div>
<div class="divButtons">
<r:buttons delBtn="${not empty venda.id}" msgs="true"/>
</div>
</fieldset>
</form>
<script type="text/javascript">
$("#txtProduto").autocomplete('<c:url value="/cadastros/venda/autocomplete.json"/>', {
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 + ")";
}
});
</script>
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:
<script type="text/javascript">
$("#txtProduto").autocomplete('<c:url value="/cadastros/venda/autocomplete.json"/>', {
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);
}
});
</script>
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 + ")";
},
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:
