Autocomplete com CI4 e Javascript
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>
Discussão (1)
Carregando comentários...