Jump to content
clovis.sardinha

Autocomplete com CI4 e Javascript

Recommended Posts

Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.

Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 

O console.log mostra que estou obtendo o  json() { [native code] }.

Segue os dois arquivos para ver se alguém me ajuda.

//arquivo cidade.js
async function carregar_cidade(valor) {
    if (valor.length >= 3) {
        //console.log("Pesquisar:" + valor);
        const dados = fetch('Testes/?cidade='+valor, {
            method: "get",
            headers: {
              "Content-Type": "application/json",
              "X-Requested-With": "XMLHttpRequest"
            }
        });
        const resposta = (await dados).json;
        
        console.log(resposta);
        var html = "<ul class='list-group position-fixed'>";
        html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>";

        html += "</ul>";
    }
}

<?php
//arquivo Testes.php
namespace App\Controllers;

use App\Models\CidadeModel;

/** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */
class Testes extends BaseController{
    protected $tbCidades;
    public function __construct(){
        $this->tbCidades = new CidadeModel();
    }
    public function index(){
      $request = \Config\Services::request();
      $client = \Config\Services::curlrequest();
      $cidades=[];
        if($get=$request->getGet()){
          $cities=$get['cidade'];
          $cidadeFiltrada=$this->tbCidades->getCidByName($cities);
          $cidades= json_encode($cidadeFiltrada);
        //dd($cidades);
      }
     echo view('Testes/testes');
    }
    public function salvar(){
      $request = \Config\Services::request();
      if($post=$request->getPost()){
        dd($post);
      }
    }
}
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Autocomplete</title>
  </head>
  <body>
    <div class="container">
      <h1 class="mt-4 mb-4">Formulário</h1>
        <form class="row g-3">
          <div class="col-12">
            <label for="cidade" class="form-label">Cidade</label>
            <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)">
          </div>
          <span ></span>
        </form>
      
    </div>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="assets/js/cidade.js"></script>
  </body>
</html>

image.png.1f8279c39162cd4cb3d43fe0c5c0c178.png

Share this post


Link to post
Share on other sites
1 hour ago, clovis.sardinha said:

const resposta = (await dados).json;

tente assim: 

const resposta = await dados.json();

A função carregar_cidade, não coloca a <ul> criada em lugar algum da página atual.

 

Um controller que vai devolver um json, não precisa carregar uma view.

Se estiver extendendo do BaseController, use o $response que ele inicia, assim:

return $this->response->setStatusCode(200)
  ->setContentType('application/json')
  ->setJSON($seu_array_de_dados);

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By clovis.sardinha
      Tenho uma consulta de autocomplete no bd que funciona no servidor local e não roda no servidor da web. 
      Ao enviar a consulta no servidor local  aparece no console :Fetch terminou o carregamento: GET ".../Cidade?cidade=sao%20paulo". A pesquisa é feita normalmente.
      Quando mando a mesma pesquisa para o servidor web(locaweb) aparece no console: Fetch terminou o carregamento: GET "..../Cidade?cidade=sao%2520paul".
      O número 25 aparece só no servidor web. Pelo que pesquisei 25 significa %, ou seja, está duplicando o caractere %. 
      Não consegui utilizar nenhuma função para evitar que isto ocorra. Alguém sabe se há alguma configuração no servidor web que possa ser alterada para evitar essa duplicação?
       
    • By FabianoSouza
      Olá pessoal.
      Eu já utilizo o FOR JSON PATH para retornar o o resultado de uma consulta com JSON. Isso eu já sei fazer.
       
      O que preciso é criar uma função que receba um SELECT como parâmetro e retorne o resultado desse SELECT já formatado como JSON.
      Estou tentando isso, mas sem sucesso.
       
      A function dbo.fn_retornaJsonPath :
      (@String NVARCHAR(MAX)) RETURNS NVARCHAR(MAX) AS BEGIN BEGIN IF @String <> NULL SET @String = (SELECT @String AS jsonPath FOR JSON PATH) END BEGIN IF @String IS NULL SET @String = '[]' END RETURN @String END Forma de executar:
      SET @sql = 'SELECT ' SET @sql = @sql + ' dbo.fn_retornaJsonPath ((SELECT TT.tema FROM dbo.tabela AS TT WHERE TT.cd = CTT.id)) AS ''temas'' ' SET @sql = @sql + ' FROM dbo.minhaTab AS CTT ' EXEC(@sql) Mas não está rolando....
    • By PresleyMenezes
      Olá pessoal, gostaria de saber como copiar o conteúdo de um campo json com muitos pais e filhos e colar em outro campo de pais e filhos do mesmo arquivo json?
       
      agradeço a ajuda de vocês.
      em anexo o arquivo json e o codigo que estou tentando fazer

       

       

       
       
       
       

       

       
    • By Giovanird
      Olá a todos!
      Tenho uma api  Sala de Aula e dentro dela o id de cada aluno. Em outra api, API ALUNO,  tenho os dados de cada aluno:  nome, foto, endereço.
      Estou fazendo o foreach da api Sala de Aula e preciso também retornar os dados de cada aluno.
      Segue o código que não estou conseguindo desenvolver
      $sala = file_get_contents("https://api/sala?id=987"); $sala = json_decode($sala, true); $sala = $sala['data']; foreach ($sala as $resulsala){ $codigoaluno = $resulsala['idaluno']; $alunos = file_get_contents("https://api/alunos?id=$codigoaluno"); $alunos = json_decode($alunos, true); $alunos = $alunos['data']; foreach ($alunos as $resulalunos){ echo $resulalunos['nome']; echo $resulalunos['foto']; echo $resulalunos['rua']; } }  
    • By kania
      Tenho a seguinte situação.
      Recebo vários JSONs podendo ou não ser multidimensional, preciso atualizar uma determinada chave deste JSON, o problema é que algumas chaves podem ser duplicadas, bem como seus respectivos valores. Como estou tentando criar uma função genérica para navegar em qualquer JSON e modificar a chave em si, com estas duplicidades de chaves, estou tendo dificuldades em dizer ao código qual é chave que devo alterar.
       
      Arquivo JSON Exemplo
       
      {       "CREDITOR": {         "TAX": {           "TAC": 0.7         },         "ENABLE": "true",         "PRODUCTION": {           "email": "email@dominio.com",           "senha": "12457895",           "BASE_URL": "https://domino.com"         },         "HOMOLOGATION": {           "email": "email@dominio.com",           "senha": "12457895",           "BASE_URL": "https://domino.com"         },         "TARGET_VALUES": 5000000       }     }  
      Converto o JSON para array
       
      $json = json_decode($json_string, true);
      Função que criei até aqui
       
         
      /**      * Encontra a chave correspondente dentro do JSON      *      * @param array $jsonArray - JSON a ser verificado      * @param string $keyFather - chave de entrada      * @param string $keyUpdate - chave que modificar      * @param string $valueUpdate - novo valor da chave      * @return string      *      */     public static function searchKeyJson(array $jsonArray, string $keyFather, string $keyUpdate = null, $valueUpdate = null)     {         foreach ($jsonArray as $key => $value) {             if ($key == $keyFather && $keyUpdate == null) {                 $jsonArray[$key] =  $valueUpdate;                 return $jsonArray;             }             if ($key == $keyFather && $keyUpdate != null) {                 $jsonArray[$keyFather][$keyUpdate] = $valueUpdate;                 return $jsonArray;             }             if (is_array($value)) {                 if (($result = self::searchKeyJson($value, $keyFather, $keyUpdate, $valueUpdate)) !== false) {                     if ($keyUpdate == null) {                         return $result;                     } else {                         return $result;                     }                 }             }         }         return false;     }
      Até modifico o valor, mais no final para salvar, ele não monta o JSON como original, ele caba ignorando a chave inicial no JSON de exmeplo "CREDITOR": {}
       
      Retorno da função (notem que esta forma do padrão da original)
       
      => [          "TAX" => [            "TAC" => 0.7,          ],          "ENABLE" => "true",          "PRODUCTION" => [            "email" => "teste",            "senha" => "12457895",            "BASE_URL" => "https://domino.com",          ],          "HOMOLOGATION" => [            "email" => "email@dominio.com",            "senha" => "12457895",            "BASE_URL" => "https://domino.com",          ],          "TARGET_VALUES" => 5000000,        ]  
      Se eu percorrer o array e tentar modificar a chave em questão, ele muda todas as as chaves que tiverem no JSON porque tem duplicidade.
      Como posso resolver isto com uma função global que sirva para qualquer padrão de JSON que eu tiver?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.