como criar um buscador de palavra dentro de uma div

[adrsublimacao]

tenho um exemplo abaixo

 

essa é minha ancora <a href="#655">buscar</a>

esse é um exemplo da div ligada na ancora
<div class="col-md-6 col-6 div-descricao-opcionais" id="<?php echo $grupo->id;?> <?php print $opc_dadosx->opnome; ?></div>    

 

queria criar algo que pudece digitar o nome ou id e ao clicar em buscar fosse ou seleciona-se baseado na busca

porque vamos dizer que tenho 100 sabores de pizza queria buscar exemplo 4 queijos e ao clicar em buscar fosse ou seleciona-se em amarelo a palavra 4 queijo pra facilitar a busca seria como um control F 
 

[lowys]

Se os dados estiverem num database, fica bem mais fácil de resolver.
você pode resolver com uma query usando like

[Frank K Hosaka]

 

Não sei fazer uma âncora com o elemento <a> e o elemento <div> como foi enunciado. Eu geralmente uso o elemento <form> e <select> assim:

<form>
<select name=selecao onchange=submit()>
    <option>1 queijo</option>
    <option>2 queijos</option>
    <option>3 queijos</option>
    <option>4 queijos</option>
</select>
</form>
<?php
if(isset($_GET['selecao'])){
    echo "a opção escolhida foi ".$_GET['selecao'];}

Para implantar um buscador, precisamos de um banco de dados do tipo MySQL, mais ou menos assim:
 

<?php
$mysqli=new mysqli("localhost","root","","laravel");
echo "<form><input name=busca onchange=submit()></form>";
if(isset($_GET["busca"])){
    $criterio=$_GET['busca'];
    $query=$mysqli->query("select * from tbprod where prod like '%$criterio%' limit 5");
    $rows=$query->fetch_all(MYSQLI_ASSOC);
    var_dump($rows);}

---------------------------------------------------------------------------------------------

No caso de você querer usar o HTML como o seu banco de dados,
nesse caso, só o JavaScript é que pode ajudar:

<style>div {display:none;background:lightgray}</style>
<script>
function mostrar(escolha){
e=document.getElementById(escolha)
e.style='display:block'
if(escolha=="frutas"){
legumes.style='display:none';proteinas.style='display:none';
fr.style='background:yellow';le.style='background:white';
pr.style='background:white'}
if(escolha=="legumes"){
proteinas.style='display:none';frutas.style='display:none';
fr.style='background:white';le.style='background:yellow';
pr.style='background:white'}
if(escolha=="proteinas"){
frutas.style='display:none';legumes.style='display:none';
fr.style='background:white';le.style='background:white';
pr.style='background:yellow'}}
</script>
<a id=fr onclick='mostrar("frutas")'>frutas</a><br>
<a id=le onclick='mostrar("legumes")'>legumes</a><br>
<a id=pr onclick='mostrar("proteinas")'>proteinas</a><br>
<div id=frutas>
    <p>Abacate
    <p>Maçã
    <p>Pera
</div>
<div id=legumes>
    <p>Repolho
    <p>Alface
    <p>Pepino
</div>
<div id=proteinas>
    <p>Carne Moída
    <p>Sobrecoxa de Frango
    <p>Sardinha
</div>

Editado Maio 27, 2023 por Frank K Hosaka