-1

Estou desenvolvendo uma página de cadastro em php onde a mesma contém 2 campos, um campo dropdownlist select cujo nome é "Categoria" e o outro um campo input com funções de autocomplete cujo nome é "Produto".

O que gostaria de fazer, se possível, seria que quando for selecionar uma categoria no dropdownlist, automaticamente o campo input autocomplete carregasse registros relacionados a categoria selecionada em questão.

Por exemplo, se for selecionado a categoria "Açougue", o campo input autocomplete somente carregasse os produtos relacionados a categoria "Acougue" quando o nome do produto for digitado no input autocomplete.

Pesquisei por aqui algumas dúvidas semelhantes, porém não obtive sucesso de como chegar a solução dessa questão:

  1. Jquery Autocomplete
  2. Autocomplete + PHP + MYSQL
  3. AutoComplete Type
  4. Autocomplete em campos dinâmicos

Abaixo segue o código que utilizo. Neste código contém o código php para carregar as categorias, que no caso carrega corretamente, e a outra parte o campo input que também carrega os registros corretamente, porém não encontro um jeito de colocar esses campos como dinâmicos:

<body>

<div class="container">
<br>
<form method="post">
<div class="row">
<div class="col-md-4">
    <label>Selecione a categoria</label>

<?php

include 'db.php';
$stmt = $connection->prepare('SELECT * FROM categorias');
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<select name="categoriaFK" id="categoriaFK" class="form-control">
  <?php foreach($results as $row): ?>
    <option value="<?= $row['categoriaID']; ?>"><?= $row['categoria']; ?></option>  
<?php endforeach ?>
</select>

</div>

<div class="col-md-4">
    <label>Digite o produto</label>
    <input type="text" class="form-control" id="produtos"/>
</div>
<div class="col-md-4">        
    <input type="submit" class="btn btn-success btn-block mt-4" name="submit" value="SUBMIT"/>
</div>
</form>

</div>
</div>
<script>
$(function() {
    $("#produtos").autocomplete({
        source: "search.php",
    });
});
</script>

</body>

No caso, como dito acima, como posso melhorar o código acima para dinamizar os dois campos em questão (categoria) e (produtos)? Obrigado.

2 Respostas 2

0

Crie um array de array com seus produtos. Quando tiver uma mudança no valor da categoria vc altera o seu autocomplete para o array especifico daquela categoria.

Exemplo (eu tirei a consulta ao banco para criar na mão os arrays):

<header>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</header>
<body>

<div class="container">
<br>
<form method="post">
<div class="row">
<div class="col-md-4">
    <label>Selecione a categoria</label>

<?php

//include 'db.php';
//$stmt = $connection->prepare('SELECT * FROM categorias');
//$stmt->execute();
//$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

$results = array(array("categoriaID"=>0,"categoria"=>"Acougue"),
array("categoriaID"=>1,"categoria"=>"Padaria"),
array("categoriaID"=>2,"categoria"=>"Farmacia"),
);

$Produtos = array();
//array de produtos do Acougue
$Produtos[0]= array("Carne","Frango","Coracao");
//array de produtos do Padaria
$Produtos[1]= array("Pao","Baguete","Biscoito");
//array de produtos do Farmacia
$Produtos[2]= array("Pilula","Xarope","Pasta de Dente");


?>

<select name="categoriaFK" id="categoriaFK" class="form-control">
  <?php foreach($results as $row){ ?>
    <option value="<?= $row['categoriaID']; ?>"><?= $row['categoria']; ?></option>  
<?php  }?>
</select>

</div>

<div class="col-md-4">
    <label>Digite o produto</label>
    <input type="text" class="form-control" id="produtos"/>
</div>
<div class="col-md-4">        
    <input type="submit" class="btn btn-success btn-block mt-4" name="submit" value="SUBMIT"/>
</div>
</form>

</div>
</div>
<script>
$(function() {
    var availableTags =[];
    <?php 
    foreach ($Produtos as $chave=>$categoria){
        echo "availableTags[".$chave."]= [";
        foreach ($categoria as $prod){
            echo '"'.$prod.'",';
        }
        echo "];".PHP_EOL;
    }

    ?>

    $("#categoriaFK").change(function(){
        $("#produtos").autocomplete({
            source: availableTags[$("#categoriaFK").val()],
        });
    });


});
</script>

</body>

Se for muito grande a lista dos produtos e não quer deixar todos eles pre carregados na pagina. Faça um ajax no onchange do select e altere sempre o valor da mesma variável. Lembre-se que, nesse caso seria bom colocar um loading na pagina, pois ele só vai atualizar a lista quando terminar o ajax.

1
  • Olá Fabrício. Obrigado pelo seu feedback. Baseando-se na sua explicação fiz algumas adaptações ao código e cheguei na solução. Também obtive respostas no Stack em inglês o que de fato condiz também com o que você mencionou aqui. Segue o link (stackoverflow.com/questions/59614107/…). Obrigado :) Commented 8/01/2020 às 15:15
-2

exatamente como na resposta acima, é como se o js fosse realizar essa busca pelo banco de dados onde você salvaria as categorias pré-definidas por você no banco de dados ou algum sistema parecido.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .