Auto complete does not work for what reason and why?

Question

Why does my search not work?

 $(document).ready( function(){

 var cidades=[], bairros=[];

  $.ajax({
    type:'POST',
    url:'curtida.php',
    dataType: 'json',
    success: function(response){

      for(var i in response){

       if(response[i].cidade!=null && response[i].bairro!=null){
        cidades +=response[i].cidade+","; 

        bairros +=response[i].bairro+",";   
        }

    }
      $("#cidade").autocomplete({
          source: cidades,
          minLength: 1
        });

        $("#bairro").autocomplete({
          source: bairros,
          minLength: 1
        });

        console.log(cidades);
        console.log(bairros);


        }

    });



  } );

PHP

   $sql_cidade_cidade= ("SELECT DISTINCT cidade FROM  Teste_cidade");// comando ser executado
    $retorno_cidade_cidade = $conn->query($sql_cidade_cidade);

 $sql_cidade_bairro= ("SELECT DISTINCT bairro FROM  Teste_bairro");// comando ser executado
$retorno_cidade_bairro = $conn->query($sql_cidade_bairro);


  while (($exibir_dados= mysqli_fetch_assoc($retorno_cidade_cidade))!==($pega_campo= mysqli_fetch_assoc($retorno_cidade_bairro))) { 
     $dados[] = array(
         'cidade'=>$exibir_dados['cidade'],
         'bairro'=>$pega_campo['bairro'], 
     ); 

        }


           echo json_encode($dados);

HTML

                    <div class="col-sm-6 ui-widget"  >
                        <span class="glyphicon glyphicon-search">  <label  class="control-label" for="cidade"> Cidade:</label></span>
                         <input  id="cidade" name="cidade" type="text" maxlength="200" class="form-control"  placeholder="Digite a Cidade" >
                    </div>
                    <div class="col-sm-6 ui-widget ">

                        <span class="glyphicon glyphicon-search">   <label  class="control-label" for="bairro"> Bairro:</label></span>

                           <input id ="bairro" name="bairro" type="text" maxlength="200"  class="form-control"  placeholder="Digite o Bairro">
                    </div>

                     <div class="col-sm-12 ">
                         <br>
                         <button onclick="pesquisaIndex()"  type="button" name="buscar" class="btn btn-primary"  >Buscar</button>
                     </div>
             </form>

Answer 1

Make sure the server data comes like this:

bairros=["bairro1","bairro2",...]

cidades=["cidade1","cidade2",...]

And adjust the JS to the following, ensuring that autocomplete is only enabled if the AJAX request is successful and has data:

$(document).ready(function () {
    var cidades = [],
        bairros = [];

    $.ajax({
        type: 'POST',
        url: 'curtida.php',
        dataType: 'json',
        success: function (response) {

            for (var i in response) {

                if (response[i].cidade != null && response[i].bairro != null) {
                    cidades += response[i].cidade + ",";

                    bairros += response[i].bairro + ",";
                }

            }

            console.log(cidades);
            console.log(bairros);
        },
        complete: function () {
            if (cidades && bairros) {
                $("#cidade").autocomplete({
                    source: cidades,
                    minLength: 1
                });

                $("#bairro").autocomplete({
                    source: bairros,
                    minLength: 1
                });
            }
        }
    });
});