Pegar valor input após autoComplete

[Foccos 6]

Preciso de algum evento (jQuery)que pega o valor selecionado pelo usuário quando
ele seleciona no autocomplete, estou usando o evento change, mas nesse caso ele pega os caracteres que digitei para ativar a janela de seleção do autocomplete, preciso que ele pegue o que foi selecionado, isso acontece depois do evento change.

Código autocomplete:

$("#produto1").autocomplete("autoCompletePro.php", {
    width: 630,
    matchContains: true,
    selectFirst: false
});

Código Change:

$("#produto1").change(function() {
    $.post("buscador.php",
            {produto1: $(this).val()},
    function(valor) {
        $("#preco1").val(valor)
    })

})

[WilliamRodrigues 9]

Use o evento select do próprio Autocomplete.

 

Segue link:

http://api.jqueryui.com/autocomplete/#event-select

[Foccos 6]

Obrigado pela resposta William, utilizei o select do autocomplete, mas quais parâmetros devo passar nele?

$("#produto1").autocomplete("autoCompletePro.php", {
    select: function(mouseout, $(this)) {},
    width: 630,
    matchContains: true,
    selectFirst: false
});

[WilliamRodrigues 9]

Use como está no exemplo da Api.

 

select: function( event, ui ) {}

 

Onde ui é o objeto que o usuário seleciono. Use um debug para ver a estrutura do objeto ui. Dentro desse evento você faz o post que está fazendo no change com a informação do ui como parâmetro.

[Foccos 6]

Realizei as alterações e ficou assim agora, mas ainda não está retornando o valor correto:

$("#produto1").autocomplete("autoCompletePro.php", {
    width: 630,
    select: function(event, ui) {
        $("#produto1").change(function() {
            $.post("buscador.php",
                    {produto1: $(this).val()},
            function(valor) {
                $("#preco1").val(valor)
            })
        })
    },
    matchContains: true,
    selectFirst: false
});

[Foccos 6]

Tentei jogar o valor diretamente também sem sucesso.

$("#produto1").val(ui.item.value);

[WilliamRodrigues 9]

Retire isso:

 

$("#produto1").change(function() { });

 

Você não precisa mais do change pois o evento select é executado quando o usuário escolhe o item no campo produto1

[Foccos 6]

Removi e agora ficou assim, e como vou pegar o valor do objeto ui?

$("#produto1").autocomplete("autoCompletePro.php", {
    width: 630,
    select: function(event, ui) { 
            $.post("buscador.php",
                    {produto1: $(this).val()},
            function(valor) {
                $("#preco1").val(valor)
            })
    },
    matchContains: true,
    selectFirst: false
});

[ESerra 744]

Movendo para a área correta, JS.

[WilliamRodrigues 9]

Provavelmente é:

 

ui.item.value

 

Mas depende de como você monto o retorno no arquivo autoCompletePro.php.

 

Porem o "value" poder ser outro nome, pois é o índice do array que é retornado do script autoCompletePro.php.

[Foccos 6]

Nele eu montei somente o sql. Arquivo autoCompletePro.php

include('../conexao.php');

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT descricao from tb_estoque where descricao LIKE '%$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$cname = $rs['descricao'];
	echo "$cname\n";
}

[WilliamRodrigues 9]

Tente algo como ui.item.descricao.

 

Se não der certo use algum debugger como Firebug ou o F12 do navegador para inspecionar o retorno do autoCompletePro.php. Assim você saberá como acessar a variável ui.

[Cacio Renato 4]

$( "#produto1" ).autocomplete(

{

source:'autoCompletePro.php',

minLength: 1,

select: function(event, ui) {

$(".suainput").value(ui.item.value)

},

focus: function( event, ui ) {

$(".suaclassepararficarmostrandoonomedoproduto").html(ui.item.value)

}

});

autoCompletePro.php

aqui passa teus parametros codigoproduto nomeproduto

array_push($results, array(

'label' => ''.$codigoproduto.'-'.$nomeproduto.'',

'value' => ''.$codigoproduto.'',

'cod'=>''.$codigoproduto.'',

'nom'=>''.$nomeproduto.'',

));

Espero ter ajudado.

echo (json_encode($results));

[Foccos 6]

Muito Obrigado pela ajuda Cacio, mas realizei as alterações e não retornou o autocomplete, ele não faz a chamada do arquivo:

$("#produto1").autocomplete(
        {
            source: 'autoCompletePro.php',
            minLength: 1,
            select: function(event, ui) {
                $("#produto1").value(ui.item.value)

            },
            focus: function(event, ui) {
                $("#produto1").html(ui.item.value)
            }
        });

e no arquivo autoCompletePro.php

include('../conexao.php');

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT descricao from tb_estoque where descricao LIKE '%$q%'";
$rsd = mysql_query($sql);
array_push($rsd, array(
'label' => ''.$descricao.'',
'value' => ''.$descricao.'',
));
echo (json_encode($rsd));

[Cacio Renato 4]

Essa sua $descrição tu tas mandando alguma coisa pra ela no teu autoCompletePro.php esta faltando

 

include('../conexao.php');

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT descricao from tb_estoque where descricao LIKE '%$q%'";
$rsd = mysql_query($sql);

$res = mysql_fetch_array($rsd );

$descricao = $res[0];
array_push($rsd, array(
'label' => ''.$descricao.'',
'value' => ''.$descricao.'',
));

echo (json_encode($rsd));

[Foccos 6]

Realizei a alteração mas não retorna a pesquisa com os produtos ao digitar, utilizei o debug e me parece que não está chamando o arquivo autoCompletePro.php

Consegui puxar os valores de acordo com a consulta, mas o problema de selecionar e jogar o valor no campo ainda não deu certo ...

$("#produto1").autocomplete("autoCompletePro.php",
        {
            minLength: 1,
            select: function(event, ui) {
                $("#produto1").value(ui.item.value)
                alert($("#produto1").val());

            },
            focus: function(event, ui) {
                $("#produto1").html(ui.item.value)
            }
        });

[WilliamRodrigues 9]

Siga esse exemplo:

 

http://jqueryui.com/autocomplete/#remote

 

Ele faz exatamente o que você quer, a unica diferença é que ele coloca o valor em uma div e não em um campo.

 

Obs: você deve colocar assim no js:

 

$("#produto1").autocomplete({
source : "autoCompletePro.php",

....
});

[Douglas Julião 34]

Cara olha um exemplo simples do que você precisa:

espero que ajude

$(document).ready(function(){
		    $("#produto1").autocomplete({
			    //source: ["nome1","nome2","nome3"],
			    source: "autoCompletePro.php",
				select: function () {
				  console.log(this.value); 
				}
			});		
		});

coloca o que você precisa onde eu coloquei o console, deve funcionar :) e eu usei o this.value e trouxe o valor correto.

[Foccos 6]

Obrigado pela ajuda Douglas, ele encontra os valores mas quando eu seleciono uma das opções ele retorna somente até onde eu digitei, por exemplo: eu digito TE , no array ele tem TESTE e TERRA , quando seleciono o TESTE, ele retorna somente o TE que havia digitado e não o TESTE que selecionei.

$(document).ready(function(){
	$("#produto1").autocomplete({
             source: ["teste","terra","exemplo","java"],
		select: function () {
		     $("#pro1").val(this.value); 
		}
	});		
});   
			  

Consegui resolver, da seguinte maneira, peguei o valor pelo objeto ui:

$(document).ready(function(){
     $("#produto1").autocomplete({
	source: ["proadvoga","foccos","loiola","praticcar"],
	    select: function (event, ui) {
		 $("#pro1").val(ui.item.value); 
	    }
     });		
});   
			  

[Douglas Julião 34]

Que bom maninho :D