1

Tenho este código

<script>

$(window).load(function(){

 var source = [{
label: "Tom Smith",
value: "1234"
}, {
label: "Tommy Smith",
value: "12321"
}];


$("#descricao").autocomplete({
    source: source,
    minLength: 1, //quantidade de caracteres para começar a buscar
    select: function (event, ui) {
        //evento de quando você seleciona uma opção        
        $("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
        $("#id").val(ui.item.value); //seto o id para ir para seu backend :D
        event.preventDefault();
    }
});
});//]]> 
</script>

Gostaria que os valores da minha variável var source fossem recebidos via ajax , então adaptei da seguinte forma:

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.6.2.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
  <title>jQueryUI 1.8.14 Autocomplete</title>
  <script type="text/javascript">//<![CDATA[

  function busca(x){

    var url = "autocomplete.php?q=" + x;

    $.ajax({
    type:"GET",
    url: url,
    dataType:'text',
     success : function(data)
         {
            var source =  data ;
       
         }
    });
}





$(window).load(function(){


$("#descricao").autocomplete({
    source: source,
    minLength: 1, //quantidade de caracteres para começar a buscar
    select: function (event, ui) {
        //evento de quando você seleciona uma opção        
        $("#descricao").val(ui.item.label); //seto a descrição para aparecer para usuario no input text
        $("#id").val(ui.item.value); //seto o id para ir para seu backend :D
        event.preventDefault();
    }
});
});//]]> 
</script>
</head>
<body>
  <input type="text" id="descricao" onkeyup="busca(this.value);" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="text" name="idQueVaiParaSeuBackEnd" id="id">
  
  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>

<div id="resultado"></div>



<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 20px; left: 0px; display: none; width: 167px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Tom Smith</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">Tommy Smith</a></li></ul></body></html>

Mas daí os valores não estão sendo interpretados pelo meu código.

Abaixo, segue o código do arquivo autocomplete.php. Ele gera o result em um formato que, no esperado, deveria ser interpretado pelo javascript

<?php 
if (!empty($_GET['q'])){
$link = new mysqli("localhost", "root", "minhasenha", "meudb");

$produto = $_GET['q'];

$produto =  '%'.$produto.'%';

$busca_produtos = $link->prepare("SELECT id, nome_com from cadastro where nome_com LIKE ? LIMIT 10");

$busca_produtos->bind_param("s", $produto);

$busca_produtos->bind_result($id, $nome_com);

$busca_produtos->execute();

$busca_produtos->store_result();

if($busca_produtos->num_rows() > 0){

	echo "[";

	while ($busca_produtos->fetch()) {
		echo "{ label: \"$nome_com\", value: \"$id\" },";

	} 

	echo "];";
	// Esta chave fecha o while ($busca_produtos->fetch()) { 

   } // Esta cahve fecha o if($busca_produtos->num_rows() > 0){

} // Esta chave fecha o if (!empty($_GET['q'])){
?>

O resultado final será este: autocomplete

Como faço pra receber o resultado via ajax e armazenar na variável?

1 Resposta 1

1

Pela forma como o Javascript funciona, a página executa todo o código que está nela em ordem. O método que você define como callback de sucesso na requisição ajax, porém, só executa quando ocorre retorno do servidor - após a montagem do seu autocomplete.

A solução é montar o seu autocomplete dentro de uma função, e executar essa função dentro do callback da requisição ajax.

Assim:

var montaAutocomplete = function (source) {
    $("#descricao").autocomplete({
        source: source,
        minLength: 1, //quantidade de caracteres para começar a buscar
        select: function (event, ui) {
            //evento de quando você seleciona uma opção        
            $("#descricao").val(ui.item.label);
            $("#id").val(ui.item.value);
            event.preventDefault();
        }
    });
}

E na requsição:

$.ajax({
    type:"GET",
    url: url,
    dataType:'text',
    success : function(data) {
        montarAutocomplete(data);
    }
});
4
  • Renan, fiz desta maneira: s4.postimg.org/v5la3tjv1/autocompl.png - Mas mesmo assim continuo sem receber dados. Será que montei da forma correta? Commented 2/08/2017 às 12:54
  • Não... Assim você monta o autocomplete toda vez que alterar o texto. O source só precisa ser montado uma vez, até onde entendo da biblioteca do autocomplete. Commented 2/08/2017 às 12:55
  • Eu pretendo fazer com que os dados sejam dinâmicos, ou seja, toda vez que o user digitar algo, ele realize uma busca na tabela, não sendo necessário carregar os dados todos de uma vez. Mesmo assim preciso montar uma vez só? Commented 2/08/2017 às 12:57
  • Sim. Quando você monta o autocomplete ele guarda a URL e fica mandando sozinho as requisições pro servidor. Você precisa utilizar uma biblioteca chamada Bloodhound também pra permitir isso, dá uma olhada na documentação do autocomplete. Commented 2/08/2017 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .