Ir para conteúdo
Fórum Script Brasil
  • 0

Usando o JavaScript para mostrar uma parte da <datalist>


Frank K Hosaka

Pergunta

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>

 

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

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 por Frank K Hosaka
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...