Usando o JavaScript para mostrar uma parte da <datalist>

[Frank K Hosaka]

Encontrei o tutorial do JavaScript nessa página: HTML DOM Datalist options Collection (w3schools.com)

Com ele, montei um código para mostrar os dez primeiros itens do <input list>. Ele usa a linguagem Blade Laravel, mas dá para adaptar no PHP, é só trocar tudo o que estiver depois do @ com o comando PHP equivalente. O Laravel já tem um comando para paginar a lista de produtos, mas ele só é funcional para 150 itens, o meu passa de 1.500 itens, logo vou precisar do JavaScript para criar o meu próprio roteiro de paginação. A minha ideia é paginar os dez próximos itens do que o usuário estiver procurando.

resources>views>produto.blade.php

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

 

[Frank K Hosaka]

Aqui está o código que lista os dez produtos a partir do produto escolhido pelo usuário:

@include('menu')
<script>
var icontrole
document.title='Produto';btmenu.innerHTML='Procurar produto por nome'
function controle(comando){
    if(comando=="proximo"){
        if(icontrole<produtos.options.length){icontrole+=10;show(icontrole)}}
    if(comando=="anterior"){
        if(icontrole>9){icontrole-=10;show(icontrole)}}}
function lista(input){
    option=Array.prototype.find.call(produto.list.options,function(option){
        return option.value === input})
    show(option.getAttribute("id"))}
function show(j){
    j=parseInt(j)
    divshow.innerHTML=""
    for(i=j;i<=j+9;i++){
    divshow.innerHTML+=produtos.options[i].value+"<br>"}
    produto.value=""
    icontrole=j}
</script>
<div class="w600 m-auto">
<input list=produtos autofocus id=produto onchange=lista(value)>
<datalist id=produtos>
@foreach($prod as $key=> $pr)
<option id={{$key}}>{{$pr->prod}} [{{$pr->codprod}}]
@endforeach
</datalist></div>
<div class="w600 m-auto" id=divshow></div>
@if(empty($show))
<script>show(0)</script>
@php $show="já começou" @endphp
@endif
<div class="w600 m-auto">
<input type=submit value=Anterior onclick="controle('anterior')">
<input type=submit value=Próximo onclick="controle('proximo')">
</div>

Sobre o código JavaScript preciso comentar que ele funciona graças ao comando j=parseInt(j) - essa é uma dica que eu recebi aqui ou no Imasters. Ele é utilizado num loop para listar os 10 itens, mas por motivo desconhecido ele não funciona como se fosse um inteiro. Assim a função parseInt garante que a variável é do tipo inteiro.

Editado Janeiro 7, 2023 por Frank K Hosaka