Como fazer o JavaScript funcionar no Laravel ou no PHP?

[Frank K Hosaka]

A minha ideia era colocar uma caixa para localizar produtos, usando o JavaScript para fazer uma lista dos dez produtos seguintes ao produto que o usuário está procurando. 

Usei o famoso loop for(i=j;i<=j+9;i++), mas ele funcionou só uma vez. Nas outras vezes, o JavaScript listou todos os produtos a partir do produto selecionado. Para evitar esse transtorno, olha só a gambiarra que eu fiz:

resources > views > produto.blade.php

@include('menu')
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function show(j){
    divshow.innerHTML=""
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++
    divshow.innerHTML+=produtos.options[j].value+"<br>"
    divshow.innerHTML+=produtos.options[j+1].value+"<br>"
    divshow.innerHTML+=produtos.options[j+2].value+"<br>"
    divshow.innerHTML+=produtos.options[j+3].value+"<br>"
    divshow.innerHTML+=produtos.options[j+4].value+"<br>"
    divshow.innerHTML+=produtos.options[j+5].value+"<br>"
    divshow.innerHTML+=produtos.options[j+6].value+"<br>"
    divshow.innerHTML+=produtos.options[j+7].value+"<br>"
    divshow.innerHTML+=produtos.options[j+8].value+"<br>"}
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id')}}
    show(j)}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
@foreach($prod as $key => $pr)
<option data-id={{$key}} value='{{$pr['prod']}}'>
@endforeach
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

O código que funciona apenas uma vez é esse daqui, eu não sei o que eu fiz de errado:

@include('menu')
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function show(j){
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
@foreach($prod as $key => $pr)
<option data-id={{$key}} value='{{$pr['prod']}}'>
@endforeach
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

Fiz o teste no PHP, mas o problema persiste:
 

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    divshow.innerHTML="";
    for(i=j;i<j+9;++i){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
function show(j){
    divshow.innerHTML="";
    for(i=j;i<j+9;++i){divshow.innerHTML+=produtos.options[i].value+"<br>";}}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

Editado Dezembro 21, 2022 por Frank K Hosaka

[Frank K Hosaka]

Consegui resolver! Tudo indica que o comando for do JavaScript só funciona uma vez, logo eu troquei pelo comando forEach. Esse comando funciona pelo menos duas vezes.

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(j){
    divshow.innerHTML="";
    teste=[1,2,3,4,5,6,7,8,9,10]
    teste.forEach(function(){
    divshow.innerHTML+=produtos.options[j].value+"<br>";j++})}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>

 

[Frank K Hosaka]

No fórum Imasters, o Omar~ sugeriu para eu ter certeza que a variável de controle do comando for seja do tipo inteiro. A sugestão dele deu certo. Onde eu tinha function show(j), eu mudei para function show(k){ j = parseInt(k); etc

Eu sempre esqueço que os números são abstrações humanas e o computador só tem dois digítos, o zero e o um. Para representar qualquer número, o algorítimo deve ser bem federal. 

Aqui a listagem original, agora com a sugestão do Omar~

<?php
$mysqli=new mysqli("localhost","root","","astudy");
$query=$mysqli->query("select * from tbprod order by prod");
$prod=$query->fetch_all(MYSQLI_ASSOC);?>
<script>
function procurar(valor){
    for(i=0;i<produtos.options.length;i++){
        if(produtos.options[i].value==valor){
            j=produtos.options[i].getAttribute('data-id');}}
    show(j);}
function show(k){
    j=parseInt(k);
    divshow.innerHTML="";
    for(i=j;i<j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"}}
</script>
<div><p><p>
<form>
<input list=produtos autofocus id=produto onchange=procurar(value) autofocus>
<datalist id=produtos>
<?php foreach($prod as $key=>$pr){echo "<option data-id=$key value='".$pr['prod']."'>";} ?>
</datalist></form></div>
<div id=divshow></div>
<script>show(0)</script>