I'm having trouble loading values into the Materialize autocomplete. What happens is the following:
$().ready(function() {
$('#sel_estado').change(function() {
$.post('auto_cid.php', {id_estado:$('#sel_estado').val()}, function(res){
console.log(res);
$('#auto_cida').autocomplete({
source:res,
limit:5,
minLenght:1
});
});
});
Return of the post is this:
{"Acrelândia": null,"Assis Brasil": null,"Brasiléia": null,"Bujari": null,"Capixaba": null,"Cruzeiro do Sul": null,"Epitaciolândia": null,"Feijó": null,"Jordão": null,"Mâncio Lima": null,"Manoel Urbano": null,"Marechal Thaumaturgo": null,"Plácido de Castro": null,"Porto Acre": null,"Porto Walter": null,"Rio Branco": null,"Rodrigues Alves": null,"Santa Rosa do Purus": null,"Sena Madureira": null,"Senador Guiomard": null,"Tarauacá": null,"Xapuri": null}
If I get the return, copy and paste inside the date: , it works perfectly.
Now, I'd like to know how to make the date: or the blessed source: directly load these return values. What am I doing wrong? = (
Any ideas?
Page code with scripts
<body>
<div class="container">
<div class="input-field col s12 m12">
<select id="sel_estado" name="sel_estado">
<option disabled selected>Selecione UF </option>
<?php
$stmt = $pdo->query('SELECT id,nome FROM tvo_estado ORDER BY nome');
$stmt->execute();
$result = $stmt->fetchAll();
foreach($result as $estado){
echo '<option value="'. $estado['id'] .'">'. $estado['nome'] .'</option>';
}
?>
</select>
<label>Estado</label>
</div>
<div class="input-field col s12 m12">
<select id="sel_cidade" name="sel_cidade">
<option disabled selected>Selecione Cidade </option>
</select>
<label>Cidade</label>
<input type="text" name="auto_cida" id="auto_cida" class="autocomplete">
</div>
<script type="text/javascript">
<!-- Habilita Menu Planos -->
$(document).ready(function(){
$('#sel_estado').formSelect();
$('#sel_cidade').formSelect();
});
$().ready(function() {
$('#sel_estado').change(function() {
$.post('sel_cidade.php', {id_estado:$('#sel_estado').val()}, function(data){
$.each(data, function (index, value){
$("#sel_cidade").append("<option value=" + value.id + '">' + value.nome + '</option>');
});
$('#sel_cidade').formSelect();
}, 'json');
});
$.post('auto_cid.php', {id_estado:$('#sel_estado').val()}, function(res){
console.log(res);
$('#auto_cida').autocomplete({
source:res, //source:res ou data:res que nao muda nada copy+paste = ok
limit:5,
minLenght:1
});
});
});
</script>
</body>
</html>
Codetoperformfeedbackis
$stmt=$pdo->prepare('SELECTid,nomefromtvo_cidadewhereid_estado="'. $id .'" ORDER BY nome ASC');
$stmt->execute();
$result = $stmt->fetchAll();
$x=0;
$aux="{";
foreach ($result as $lines) {
$aux .= "\"". $lines['nome'] ."\": null";
if($x<sizeof($result)-1){
$aux .=",";
$x++;
}else{
$aux .='}';
}
}
echo json_encode($aux);
I have already used the same as I use to return the cities that I load in the menu that is running (which is working), which is this section (but that does not work for autocomplete):
if($id){
$stmt = $pdo->prepare('SELECT id,nome from tvo_cidade where id_estado="'. $id .'" ORDER BY nome ASC');
$stmt->execute();
$result = $stmt->fetchAll();
echo json_encode($result);
return;
}
In the hope of a solution ... = '( Thank you.
