Vraptor - Busca por id usando JSON

15 respostas
P

Fala galera do guj. Cá estou eu com mais uma dúvida. To tentando fazer uma busca por id, que ao clicar enter, o conteúdo dos outros campos será preenchido pelo método do de busca do json. Meu codigo está assim:

ProdutoDao

public Produto busca(Long id) {
		return (Produto) this.session.load(Produto.class, id);
	}

	public List<Produto> busca(String nome) {
		return this.session.createCriteria(Produto.class)
				.add(Restrictions.ilike("nome", nome, MatchMode.ANYWHERE))
				.list();
	}

ProdutosController

@Get("/produtos/busca")
	public List<Produto> busca(String nome){
		result.include("nome",nome);
		return pdao.busca(nome);
	}
	
	@Get("/produtos/buscaid")
	public Produto busca(Long id){
		result.include("id",id);
		return pdao.busca(id);
	}
	

	@Get("/produtos/busca.json")
	public void buscaJson(String q){
		result.use(json()).withoutRoot()
			.from(pdao.busca(q))
			.serialize();
	}
	
	@Get("/produtos/buscaid.json")
	public void buscaidJson(Long q){
		result.use(json()).withoutRoot()
			.from(pdao.busca(q))
			.serialize();
	}

e meu formulario:

....
		<label for="id">Id:</label>
		<input id="id" type="text" name="produto.id" value="${obj.id }"/>

....

	$("#id").autocomplete('<c:url value="/produtos/buscaid.json"/>',
			{
				dataType : "json",
				parse : function(produtos) {
					return $.map(produtos, function(produto) {
						return {
							data : produto,
							value : produto.id,
							result : produto.id
						};
					});
				},
				formatItem : function(produto) {
					document.getElementById("nome").value = produto.nome;
					document.getElementById("descricao").value = produto.descricao;
					document.getElementById("preco").value = produto.preco;
					document.getElementById("categoria_id").value = produto.categoria.id_categoria;
					document.getElementById("categoria").value = produto.categoria.descricao;
					return produto.id;
				}
			});

A busca é feita no console (tá printando a consulta feita pelo hibernate), mas os campos não estão sendo preenchidos. Estou fazendo algo errado?
Agradeço desde já :slight_smile:

OBS: Fiz a mesma consulta por descrição e deu certo.

15 Respostas

R

Vamos lá! Primeiríssima coisa: o jQuery está ai para facilitar muito a sua vida, deixe ele fazer o trabalho sujo por você:
Isso é muito feio!!

document.getElementById("nome").value = produto.nome;
document.getElementById("descricao").value = produto.descricao;
document.getElementById("preco").value = produto.preco;
document.getElementById("categoria_id").value = produto.categoria.id_categoria;
document.getElementById("categoria").value = produto.categoria.descricao;

Com jQuery fica assim:

$("#nome").val(produto.nome);
$("#descricao").val(produto.descricao);
$("#preco").val(produto.preco);
$("#categoria_id").val(produto.categoria.id_categoria);
$("#categoria").val(produto.categoria.descricao);

Quase tudo o que você quiser fazer em javascript, pense em como fazer com jQuery, antes de tentar o js nativo.
Por exemplo, o jQuery faz até um for each para você:

function populaLista() {
   var list = ['as', 'asd', 'qwe', 'qw', 'sdf', 'bgd', 'jtt', 'lkj', 'iuy', 'bgf', 'juh', 'nbv', 'xcv', 'nhg', 'qe'];
   var listTratada = [];
   $(list).each(function(){
      listTratada.push('<li>' + this + '</li>'); // this aqui é o valor do item corrente na lista.
   });
   $('#divQueSeparaALista ul').empty().append(listTratada.join('')); // Aqui você pode chamar encadeadamente, pois o método empty retorna a própria UL...
}

Segundo:
Eu prefiro usar o autocomplete nativo do jQuery UI, ele é um pouco mais fácil de mexer…
Voce vai precisar das versões mais novas do jQuery e do jQuery UI:
http://jqueryui.com/
E você vai precisar ler um pouco sobre como fazer um autocomplete de maneira mais fácil:
http://jqueryui.com/autocomplete/
Aqui tem vários exemplos!

Qualquer coisa, manda ai que eu te ajudo!

P

Valeu Rafael, vou dar uma lida e já já posto de novo :thumbup:

P

Rafael, dei uma lida aqui no autocomplete e realmente é bem mais simples. Mas estou com uma duvida referente ao source do autocomplete que seria o resultado do meu json. O que eu tenho aqui é algo desmembrado… veja se estou indo no caminho certo…

Aqui é o codigo do autocomplete bem enxuto, so falta colocar o source que é o json.

$( "#buscaid" ).autocomplete({
            source: Aquivaiosource
        });

e aqui tenho o json… posso colocar assim direto no source do autocomplete?

$.getJSON('<c:url value="/produtos/buscaid.json"/>', function (json) {
	$("#id").val(produto.id);
	$("#nome").val(produto.nome);  
	$("#descricao").val(produto.descricao);  
	$("#preco").val(produto.preco);  
	$("#categoria_id").val(produto.categoria.id_categoria);  
	$("#categoria").val(produto.categoria.descricao);
});

Obrigado desde já :slight_smile:

R

Na verdade você quer que, quando o cara selecione um registro, os dados sobre esse registro são populados nos outros campos, correto?

Então vamos por parte:

  1. O source serve para você pegar todos os registros que combinam com o que ele começou a digitar.
  2. Quando o cara selecionar um registro, você vai precisar pegar as informações sobre aquele registro que ele selecionou e vai preencher os campos.

Eu fiz aqui um exemplo de como ficaria a sua configuração:

$('#autocomplete').autocomplete({
				source: function(request, response){
					$.ajax({
						url: '&lt;c:url value=""/&gt;', // URL
						type: 'post', // Eu gosto de usar o $.ajax justamente por causa desse option.
						data: {
							term: $.trim(request.term) // 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento  na action.
						},
						success: 
						function(data) {
		                	response($.map(data,
		                		function(item){ // item é uma categoria, nesse caso. Não troque o nome, pois assim facilita.
			                		return {
			                			label: item.name, // o plugin usa essas duas informações (label e value). Mas você pode adicionar quantas precisar.
			                			value: item.name,
			                			categoria: item // Aqui você passa a categoria inteira mesmo para depois pegar o que precisa
			                		};
			                	}
			                ));
		                }
					});
	            },
	            select: function(event, ui){ // Essa função é acionada quando ele seleciona um registro.
					$("#id").val(ui.item.categoria.id); // Dentro de item tem a categoria (que foi adicionada  em cima). A partir dela você pega os outros atributos.
				},
				minLength: 0, // Eu gosto de deixar como 0, pois ai a pessoa consegue buscar sem saber o que quer buscar.
				open: function() { // Essa é uma função bem legal que vai deixar o texto que combina em negrito...
			var data = $(this).data('autocomplete');
			data.menu.element.find('a').each(function () {
				var self = $(this);
				var keywords = $.trim(data.term).replace(/^(\*)/g, '').replace(/\s/g, '\\ ');
				if (keywords.length &gt; 0)
					self.html(self.text().replace(new RegExp('(' + keywords + ')(.*)', 'gi'), '<b>$1</b>$2'));
			});
        }
			});
P

Rafael, não funcionou. Adicionei os js na pasta e no código. Meu código está assim:

ProdutosController

@Get("/produtos/busca")
	public List<Produto> busca(String nome){
		result.include("nome",nome);
		return pdao.busca(nome);
	}

	@Get("/produtos/busca.json")
	public void buscaJson(String q){
		result.use(json()).withoutRoot()
			.from(pdao.busca(q))
			.include("categoria")
			.serialize();
	}

formulario

$('#buscaid').autocomplete({  
	    source: function(request, response){  
	        $.ajax({  
	            url: '<c:url value="/produtos/busca.json"/>', // URL  
	            type: 'post', // Eu gosto de usar o $.ajax justamente por causa desse option.  
	            data: {  
	                term: $.trim(request.term) // 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento  na action.  
	            },  
	            success:   
	            function(data) {  
	                response($.map(produtos,  
	                    function(item){ // item é uma categoria, nesse caso. Não troque o nome, pois assim facilita.  
	                        return {  
	                            label: item.nome, // o plugin usa essas duas informações (label e value). Mas você pode adicionar quantas precisar.  
	                            value: item.nome,  
	                            produto: item // Aqui você passa a categoria inteira mesmo para depois pegar o que precisa  
	                        };  
	                    }  
	                ));  
	               }  
	        });  
	          },  
	          select: function(event, ui){ // Essa função é acionada quando ele seleciona um registro.  
			$("#id").val(ui.item.produto.id);
			$("#nome").val(ui.item.produto.nome);  
			$("#descricao").val(ui.item.produto.descricao);  
			$("#preco").val(ui.item.produto.preco);  
			$("#categoria_id").val(ui.item.produto.categoria.id_categoria);  
			$("#categoria").val(ui.item.produto.categoria.descricao);        
	    },  
	    minLength: 0, // Eu gosto de deixar como 0, pois ai a pessoa consegue buscar sem saber o que quer buscar.  
	    open: function() { // Essa é uma função bem legal que vai deixar o texto que combina em negrito...  
	var data = $(this).data('autocomplete');  
	data.menu.element.find('a').each(function () {  
	    var self = $(this);  
	    var keywords = $.trim(data.term).replace(/^(\*)/g, '').replace(/\s/g, '\\ ');  
	    if (keywords.length > 0)  
	        self.html(self.text().replace(new RegExp('(' + keywords + ')(.*)', 'gi'), '<b>$1</b>$2'));  
	});  
	     }  
	});

Estou fazendo algo errado?

R

Sim, 2 coisas:
Aqui é get, pois a sua action está anotada para receber requisições GET.
‘request.term’ é o que a pessoa está digitando e ‘term’ é o nome do seu argumento lá na action.

type: 'get', // Aqui é get, pois a sua action está anotada para receber requisições GET.
            data: {    
// 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento lá na action.    
                q: $.trim(request.term) // tem que trocar de 'term' para 'q'
            },
P

Infelizmente nada feito :confused: é como se o autocomplete não estivesse funcionando. Mas eu to chamando os js certinho.

<script type="text/javascript" src="<c:url value="/javascripts/jquery-1.8.2.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/javascripts/jquery-ui-1.9.0.custom.min.js"/>"></script>

e o codigo do formulario ficou assim:

$('#buscaid').autocomplete({  
	    source: function(request, response){  
	        $.ajax({  
	            url: '<c:url value="/produtos/busca.json"/>', // URL  
	            type: 'get', // Eu gosto de usar o $.ajax justamente por causa desse option.  
	            data: {  
	                q: $.trim(request.term) // 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento  na action.  
	            },  
	            success:   
	            function(data) {  
	                response($.map(produtos,
	                    function(item){ // item é uma categoria, nesse caso. Não troque o nome, pois assim facilita.  
	                        return {  
	                            label: item.nome, // o plugin usa essas duas informações (label e value). Mas você pode adicionar quantas precisar.  
	                            value: item.nome,  
	                            produto: item // Aqui você passa a categoria inteira mesmo para depois pegar o que precisa  
	                        };  
	                    }  
	                ));  
	               }  
	        });  
	          },  
	          select: function(event, ui){ // Essa função é acionada quando ele seleciona um registro.  
			$("#id").val(ui.item.produto.id);
			$("#nome").val(ui.item.produto.nome);  
			$("#descricao").val(ui.item.produto.descricao);  
			$("#preco").val(ui.item.produto.preco);  
			$("#categoria_id").val(ui.item.produto.categoria.id_categoria);  
			$("#categoria").val(ui.item.produto.categoria.descricao);        
	    },  
	    minLength: 0, // Eu gosto de deixar como 0, pois ai a pessoa consegue buscar sem saber o que quer buscar.  
	    open: function() { // Essa é uma função bem legal que vai deixar o texto que combina em negrito...  
	var data = $(this).data('autocomplete');  
	data.menu.element.find('a').each(function () {  
	    var self = $(this);  
	    var keywords = $.trim(data.term).replace(/^(\*)/g, '').replace(/\s/g, '\\ ');  
	    if (keywords.length > 0)  
	        self.html(self.text().replace(new RegExp('(' + keywords + ')(.*)', 'gi'), '<b>$1</b>$2'));  
	});  
	     }  
	});

Será que tem alguma outra coisa errada?

R

Ele executa o ajax?
Você está com a taglib core importada?
Tem erro no Firebug?

P

Pelo visto não executa o ajax, pois não faz nem o autocomplete.
Passei no firebug e não acusou nenhum erro…
taglib core? acredito que não, qual jar tenho q baixar?

Obrigado.

R

você consegue usar a tag <c:url>?

Tem que ver se o problema não está na url… na chamada do ajax…

P

ah, consigo sim… usei em varios lugares. Então não faço ideia de onde esteja o erro :confused:

R

mostra para mim toda a sua JSP…

P

ta aqui

<html>
	<head>
		<title>Good Buys</title>
		<link href="/goodbuy/goodbuy.css" rel="stylesheet" type="text/css" media="screen" />
		<link href="/goodbuy/javascripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/javascripts/jquery-1.8.2.js"/>"></script>  
		<script type="text/javascript" src="<c:url value="/javascripts/jquery-ui-1.9.0.custom.min.js"/>"></script>  
		<script type="text/javascript" src="/goodbuy/javascripts/jquery.validate.min.js"></script>
		<script type="text/javascript" src="/goodbuy/javascripts/jquery.autocomplete.min.js"></script>
		<script type="text/javascript" src="/goodbuy/javascripts/jquery.puts.js"></script>
		
	</head>
	
<body>
	<div id="header">
		<div id="carrinho">
			<h3><a href="/goodbuy/carrinho">Meu carrinho:</a></h3>
			
				<span>Você não possui itens no seu carrinho</span>
			
			
		</div>
		<div id="usuario">
			
				Olá, Paulo Del Aguila!
				<a href="/goodbuy/logout">Logout</a>
			
			
		</div>
	</div>
	<div id="erros">
		<ul>
			
		</ul>
	</div>
	<div id="body">
		<div id="menu">
			<ul>
			
				<li><a href="/goodbuy/produtos/novo">Produto</a></li>
				<li><a href="/goodbuy/categoria/novo">Categoria</a></li>
					
			<li><a href="/goodbuy/produtos">Lista Produtos</a></li>
			<li><a href="/goodbuy/categoria">Lista Categorias</a></li>					
			</ul>

		</div>
					<div id="content"><form action="/goodbuy/produtos" method="POST">
	<fieldset>
		<legend>Produto</legend>
		
		
		<label for="id">Código:</label>
		<input id="id" type="text" readonly="readonly" name="produto.id" value=""/>
		
		<label for="nome">Nome:</label>
		<input id="nome" type="text" name="produto.nome" value=""/>		
			
		<label for="descricao">Descrição:</label>
		<input id="descricao" type="text" name="produto.descricao" value=""/>
		
		<label for="preco">Preço:</label>
		<input id="preco" type="text" name="produto.preco" value=""/>
		
		<label for="categoria">Categoria:</label>
		<input id="categoria_id" type="hidden" name="produto.categoria.id_categoria" value=""/>
		<input id="categoria" type="text" name="produto.categoria.descricao" value=""/>
		<script type="text/javascript">
			$("#categoria").autocomplete('/goodbuy/categoria/busca.json',
					{
						dataType : "json",
						parse : function(categorias) {
							return $.map(categorias, function(categoria) {
								return {
									data : categoria,
									value : categoria.descricao,
									result : categoria.descricao,
									id: categoria.id_categoria
								};
								alert(categoria.descricao);
							});
						},
						formatItem : function(categoria) {
							document.getElementById("categoria_id").value = categoria.id_categoria;
							return categoria.descricao;
						}
					});			
		</script>	
		<button type="submit">Enviar</button>
	</fieldset>
</form>
<fieldset>
	<legend>Pesquisa</legend>
	<label for="descricao">Por descrição:</label>
	<input id="buscanome" name="nome" size="40"/>
</fieldset>
<script type="text/javascript">
$('#buscanome').autocomplete({  
    source: function(request, response){  
        $.ajax({  
            url: '/goodbuy/produtos/busca.json', // URL  
            type: 'get', // Eu gosto de usar o $.ajax justamente por causa desse option.  
            data: {  
                q: $.trim(request.term) // 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento  na action.  
            },  
            success:   
            function(data) {  
                response($.map(produtos,  
                    function(item){ // item é uma categoria, nesse caso. Não troque o nome, pois assim facilita.  
                        return {  
                            label: item.nome, // o plugin usa essas duas informações (label e value). Mas você pode adicionar quantas precisar.  
                            value: item.nome,  
                            produto: item // Aqui você passa a categoria inteira mesmo para depois pegar o que precisa  
                        };  
                    }  
                ));  
               }  
        });  
          },  
          select: function(event, ui){ // Essa função é acionada quando ele seleciona um registro.  
		$("#id").val(ui.item.produto.id);
		$("#nome").val(ui.item.produto.nome);  
		$("#descricao").val(ui.item.produto.descricao);  
		$("#preco").val(ui.item.produto.preco);  
		$("#categoria_id").val(ui.item.produto.categoria.id_categoria);  
		$("#categoria").val(ui.item.produto.categoria.descricao);        
    },  
    minLength: 0, // Eu gosto de deixar como 0, pois ai a pessoa consegue buscar sem saber o que quer buscar.  
    open: function() { // Essa é uma função bem legal que vai deixar o texto que combina em negrito...  
var data = $(this).data('autocomplete');  
data.menu.element.find('a').each(function () {  
    var self = $(this);  
    var keywords = $.trim(data.term).replace(/^(\*)/g, '').replace(/\s/g, '\\ ');  
    if (keywords.length > 0)  
        self.html(self.text().replace(new RegExp('(' + keywords + ')(.*)', 'gi'), '<b>$1</b>$2'));  
});  
     }  
});
</script>
		</div><!-- div content -->
	</div><!-- div body -->
	<div id="footer">
	
	</div>

</body>
</html>
R

Pera ai, tem coisa estranha ai… Isso ai é a sua JSP? Ou é o HTML no browser?

Tem que arrumar aqui…

&lt;link href="/goodbuy/goodbuy.css" rel="stylesheet" type="text/css" media="screen" /&gt;  
        &lt;link href="/goodbuy/javascripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" media="screen" /&gt;  &lt;!--// apaga essa linha. e adiciona o css do jquery ui...--&gt;
        &lt;script type="text/javascript" src="&lt;c:url value="/javascripts/jquery-1.8.2.js"/&gt;"&gt;&lt;/script&gt;    &lt;!--// aqui está usando o c:url --&gt;
        &lt;script type="text/javascript" src="&lt;c:url value="/javascripts/jquery-ui-1.9.0.custom.min.js"/&gt;"&gt;&lt;/script&gt;    
        &lt;script type="text/javascript" src="/goodbuy/javascripts/jquery.validate.min.js"&gt;&lt;/script&gt;  &lt;!--// e aqui não usa o c:url... --&gt;
        &lt;script type="text/javascript" src="/goodbuy/javascripts/jquery.autocomplete.min.js"&gt;&lt;/script&gt;  &lt;!--// apaga essa linha. --&gt;
        &lt;script type="text/javascript" src="/goodbuy/javascripts/jquery.puts.js"&gt;&lt;/script&gt;

Precisa remover esse script velho daqui. Tem que arrumar todos para funcionar da forma nova.

<script type="text/javascript">  
            $("#categoria").autocomplete('/goodbuy/categoria/busca.json',  
                    {  
                        dataType : "json",  
                        parse : function(categorias) {  
                            return $.map(categorias, function(categoria) {  
                                return {  
                                    data : categoria,  
                                    value : categoria.descricao,  
                                    result : categoria.descricao,  
                                    id: categoria.id_categoria  
                                };  
                                alert(categoria.descricao);  
                            });  
                        },  
                        formatItem : function(categoria) {  
                            document.getElementById("categoria_id").value = categoria.id_categoria;  
                            return categoria.descricao;  
                        }  
                    });           
        </script>
P

certo, aqui está corrigido, mas também nada…

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
	<head>
		<title>Good Buys</title>
		<link href="<c:url value="/goodbuy.css"/>" rel="stylesheet" type="text/css" media="screen" />
		<link href="<c:url value="/javascripts/jquery-ui-1.9.0.custom.css"/>" rel="stylesheet" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/javascripts/jquery-1.8.2.js"/>"></script>    
        <script type="text/javascript" src="<c:url value="/javascripts/jquery-ui-1.9.0.custom.min.js"/>"></script>  
		<script type="text/javascript" src="<c:url value="/javascripts/jquery.validate.min.js"/>"></script>
		<script type="text/javascript" src="<c:url value="/javascripts/jquery.puts.js"/>"></script>
		<fmt:setLocale value="pt_br"/>
	</head>
	
<body>
	<div id="header">
		<div id="carrinho">
			<h3><a href="<c:url value="/carrinho"/>">Meu carrinho:</a></h3>
			<c:if test="${empty carrinho or carrinho.totalDeItens eq 0 }">
				<span>Você não possui itens no seu carrinho</span>
			</c:if>
			<c:if test="${carrinho.totalDeItens > 0 }">
				<ul>
					<li><strong>Itens:</strong> ${carrinho.totalDeItens }</li>
					<li><strong>Total:</strong> <fmt:formatNumber type="currency"
							value="${carrinho.total }" /></li>
				</ul>
			</c:if>
		</div>
		<div id="usuario">
			<c:if test="${usuarioWeb.logado}">
				Olá, ${usuarioWeb.nome }!
				<a href="<c:url value="/logout"/>">Logout</a>
			</c:if>
			<c:if test="${empty usuarioWeb or not usuarioWeb.logado}">		
				Você não está logado.
				<a href="<c:url value="/login"/>">Login</a>
				<a href="<c:url value="/usuarios/novo"/>">Cadastre-se</a>
			</c:if>
		</div>
	</div>
	<div id="erros">
		<ul>
			<c:forEach items="${errors}" var="error">
				<li>${error.category } - ${error.message }</li>
			</c:forEach>
		</ul>
	</div>
	<div id="body">
		<div id="menu">
			<ul>
			<c:if test="${usuarioWeb.logado }">
				<li><a href="<c:url value="/produtos/novo"/>">Produto</a></li>
				<li><a href="<c:url value="/categoria/novo"/>">Categoria</a></li>
			</c:if>		
			<li><a href="<c:url value="/produtos"/>">Lista Produtos</a></li>
			<li><a href="<c:url value="/categoria"/>">Lista Categorias</a></li>					
			</ul>

		</div>
					<div id="content">
<form action="<c:url value="/produtos"/>" method="POST">
	<fieldset>
		<legend>Produto</legend>
		
		
		<label for="id">Código:</label>
		<input id="id" type="text" readonly="readonly" name="produto.id" value="${obj.id }"/>
		
		<label for="nome">Nome:</label>
		<input id="nome" type="text" name="produto.nome" value="${obj.nome }"/>		
			
		<label for="descricao">Descrição:</label>
		<input id="descricao" type="text" name="produto.descricao" value="${obj.descricao }"/>
		
		<label for="preco">Preço:</label>
		<input id="preco" type="text" name="produto.preco" value="${obj.preco }"/>
		
		<label for="categoria">Categoria:</label>
		<input id="categoria_id" type="hidden" name="produto.categoria.id_categoria" value="${obj.categoria.id_categoria }"/>
		<input id="categoria" type="text" name="produto.categoria.descricao" value="${obj.categoria.descricao}"/>
		<button type="submit">Enviar</button>
	</fieldset>
</form>
<fieldset>
	<legend>Pesquisa</legend>
	<label for="descricao">Por descrição:</label>
	<input id="buscanome" name="nome" size="40"/>
</fieldset>
<script type="text/javascript">
$('#buscanome').autocomplete({  
    source: function(request, response){  
        $.ajax({  
            url: '<c:url value="/produtos/busca.json"/>', // URL  
            type: 'get', // Eu gosto de usar o $.ajax justamente por causa desse option.  
            data: {  
                q: $.trim(request.term) // 'request.term' é o que a pessoa está digitando e 'term' é o nome do seu argumento  na action.  
            },  
            success:   
            function(data) {  
                response($.map(produtos,  
                    function(item){ // item é uma categoria, nesse caso. Não troque o nome, pois assim facilita.  
                        return {  
                            label: item.nome, // o plugin usa essas duas informações (label e value). Mas você pode adicionar quantas precisar.  
                            value: item.nome,  
                            produto: item // Aqui você passa a categoria inteira mesmo para depois pegar o que precisa  
                        };  
                    }  
                ));  
               }  
        });  
          },  
          select: function(event, ui){ // Essa função é acionada quando ele seleciona um registro.  
		$("#id").val(ui.item.produto.id);
		$("#nome").val(ui.item.produto.nome);  
		$("#descricao").val(ui.item.produto.descricao);  
		$("#preco").val(ui.item.produto.preco);  
		$("#categoria_id").val(ui.item.produto.categoria.id_categoria);  
		$("#categoria").val(ui.item.produto.categoria.descricao);        
    },  
    minLength: 0, // Eu gosto de deixar como 0, pois ai a pessoa consegue buscar sem saber o que quer buscar.  
    open: function() { // Essa é uma função bem legal que vai deixar o texto que combina em negrito...  
var data = $(this).data('autocomplete');  
data.menu.element.find('a').each(function () {  
    var self = $(this);  
    var keywords = $.trim(data.term).replace(/^(\*)/g, '').replace(/\s/g, '\\ ');  
    if (keywords.length > 0)  
        self.html(self.text().replace(new RegExp('(' + keywords + ')(.*)', 'gi'), '<b>$1</b>$2'));  
});  
     }  
});
</script>

		</div><!-- div content -->
	</div><!-- div body -->
	<div id="footer">
	
	</div>

</body>
</html>
Criado 23 de outubro de 2012
Ultima resposta 23 de out. de 2012
Respostas 15
Participantes 2