0

Tenho o seguinte arquivo:

index.php

<script type="text/javascript">

function montaAutocomplete(source) {


 $( function() {



    var availableTags = [ source ];

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

  } );

}

</script><script>
function busca_palavra(x){

  $.ajax({
    type:"GET",
    url: "autocomplete_sugestoes_descricao.php?q=" + x,
    dataType:'text',
    success : function(data) {

        montaAutocomplete( data );

      }
    });

}
</script>

E o arquivo que gera o resultado:

autocomplete_sugestoes_descricao.php

<?php

require "../conexao_ajax.php";


$q                 = preg_replace("/[^0-9A-Za-z]-/", "",$_GET['q']);

$q_formatado       =  '%'.$q.'%';


if(!empty($q)){ 
    $busca_descricao = $link->prepare("SELECT id, descricao FROM ctrl_bancario WHERE descricao LIKE ? ORDER BY descricao ASC LIMIT 10");

    $busca_descricao->bind_param("s", $q_formatado);

    $busca_descricao->bind_result($id, $descricao);

    $busca_descricao->execute();

    $busca_descricao->store_result();

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

        echo "[";


        while ($busca_descricao->fetch()) {

            echo "$descricao, "; 

        }// Esta chave fecha o while ($busca_descricao->fetch()) { 

            echo "]";

       } // Esta chave fecha o if($busca_descricao->num_rows() > 0){


} // Esta chave fecha if(!empty($q)){   

?>

Estou conseguindo receber os dados normalmente, entretanto, se tenho dois registros em minha tabela:

registros

a minha aplicação está retornando os dados desta forma no autocomplete do index.php:

inserir a descrição da imagem aqui

como se não houvesse uma quebra de linha ou uma correta interpretação dos dados.

Como eu poderia proceder no momento de tratar esses dados vindos do arquivo autocomplete_sugestoes_descricao.php na variável var availableTags = [ source ];?

Espero obter este resultado:

resultado_final

4
  • 1
    Seu problema parece estar no "availableTags ", tem como postar ela junto da pergunta?
    – BillRizer
    31/08/2017 às 13:40
  • O resultado da minha consulta retorna exatamente assim: [Depósito de Teste , teste, ] 31/08/2017 às 13:44
  • E o "availableTags" está sendo declarado no primeiro script do arquivo index.php 31/08/2017 às 13:48
  • Estou me baseando neste exemplo para construir o meu: jqueryui.com/resources/demos/autocomplete/default.html 31/08/2017 às 13:49

3 Respostas 3

1

Seu problema esta no formado dos dados:

[Depósito de Teste , teste, ]

Deve conter aspas ou apóstrofe.

var teste = ["Depósito de Teste" , "teste", ];

Use json_encode para seu php retornar* no formato correto

echo json_encode($result);

  $( function() {
   
      var dados= ["Depósito de Teste" , "teste" ];

     $( "#teste" ).autocomplete({
      source: dados
    });
  } );
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <div class="ui-widget">
  <label for="teste">teste </label>
  <input id="teste">
</div>

1
  • Quando uso as 'sugestões' de forma estática, ele exibe sem problemas, entretanto, quando requisito com o autocomplete_sugestoes_descricao.php ele ainda retorna nessa única linha 31/08/2017 às 14:35
1

Compile todos os dados vindos do banco dentro de um array e depois devolva o array para o seu ajax usando json_encode.

if ($busca_descricao->num_rows() > 0){
   $result = array();

    while ($busca_descricao->fetch()) {
        $result[] = $descricao;
    }
}

echo json_encode($result);

Isso vai retornar um array formatado em

success: function(data) {
}
5
  • 1
    Usei o seu trecho de código. Ele apenas me retornou um: [true,true] 31/08/2017 às 14:12
  • @netoweb Erro meu. Editei. 31/08/2017 às 14:31
  • Ele me retornou ["Dep\u00f3sito de Teste\r\n","teste"] quando testado no arquivo autocomplete_sugestoes_descricao.php e tbm na aplicação principal, ainda assim exibindo tudo na mesma linha. Eu teria que tratar esses dados em success: function(data) { } ? - Se sim, como procederia ? 31/08/2017 às 14:33
  • Isso provavelmente está relacionado à forma como o dado foi gravado no banco de dado, seja pela forma como foi enviado, seja pela forma como foi guardado (formatação do campo na tabela). Precisa investigar, mas já é outra questão. 31/08/2017 às 14:41
  • Bruno. Dê uma olhada nesta minha resposta: pt.stackoverflow.com/a/233780/76180 e me diga se é seguro usar desta maneira. 31/08/2017 às 14:43
0

Consegui achar uma solução:

var dados = [ source ];

var availableTags = JSON.parse(dados);

Ela funcionou perfeitamente, me retornando este resultado:

Seria seguro usar desta maneira?

inserir a descrição da imagem aqui

3
  • Essa é a solução para um problema extra, não responde a questão inicial que é como retornar os dados formatados. 31/08/2017 às 14:43
  • Não há nenhum problema em utilizar o JSON.parse nesse cotexto, até onde sei. 31/08/2017 às 14:44
  • Funciona, mas penso que deve padronizar sua API, fazendo-a retornar apenas JSON, usando echo json_encode($result); nos retornos do seu php. caso contrario você precisa ficar fazendo parse* no seu JS.
    – BillRizer
    31/08/2017 às 15:52

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 .