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:
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.