Interpret data from an external file to use in Autocomplete

Question

I have the following file:

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>

And the file that generates the result:

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)){   

?>

I am being able to receive the data normally, however, if I have two records in my table:

my application is returning the data this way on autocomplete of index php.:

as if there was no break in line or correct interpretation of the data.

How could I proceed at the time of processing this data from the archive autocomplete_sugestoes_descricao.php in the variable var availableTags = [ source ];?

I hope to get this result:

Answer 1

Your problem is in the form of data:

[Depósito de Teste , teste, ]

Must contain quotes or apostrophe.

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

Use json_encode for your php to return* in the correct format

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>

Answer 2

Compile all data coming from the database within an array and then return the array to your ajax using json_encode.

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

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

echo json_encode($result);

This will return an array formatted in

success: function(data) {
}

Answer 3

I was able to find a solution:

var dados = [ source ];

var availableTags = JSON.parse(dados);

It worked perfectly, returning me this result:

It would be safe to use it this way?