Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

NBFLancaster

Pesquisar usando scroll

Recommended Posts

Galera, sou novo no fórum, e gostaria de uma ajuda: Realizei um código simples, para pesquisar através de um campo que vou digitando e ele vai procurando alguma coisa semelhante com a que tenho nas <tr>.


Só que não esta funcionando direito o scroll...gostaria de uma força para saber onde estou errando...


Obrigado!



<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>
.teste{
width: 200px;
height: 100px;
overflow-y: scroll;
padding: 10px;
margin-top: 20px;
}
.active{
border: 1px solid red;
}
</style>
</head>
<body>

<p><strong>Buscar:</strong></p>
<input type="text" id="txtBusca" />

<div class="teste">
<table id="grid">
<tr>
<th>Tipo mesmo</th>
<th>Altura</th>

<tr>
<td>Loira</td>
<td>1,75</td>
</tr>


<tr>
<td>Japonesa</td>
<td>1,75</td>
</tr>

<tr>
<td>Morena</td>
<td>1,75</td>
</tr>

<tr>
<td>Morena</td>
<td>1,75</td>
</tr>
<tr>
<td>Morena</td>
<td>1,75</td>
</tr>
<tr>
<td>Ruiva</td>
<td>1,75</td>
</tr>
<tr>
<td>Negra</td>
<td>1,75</td>
</tr>

</table>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script>
function PesquisarURL(target, destiny){
var valor = target.val().toLowerCase(),
set;

$(destiny).find('td').each(function(){
$(this).removeClass('active');

if(valor != '' && $(this).text().toLowerCase().indexOf(valor) != -1){
offset = $(this).closest('tr').offset();
$(this).addClass('active');
}



});



$(destiny).closest('div').animate({scrollTop:offset.top},600);
}

$(document).ready(function(){

$('#txtBusca').keyup(function(){

PesquisarURL($(this), $('#grid'));
});
});
</script>

</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pelo interesse... Mas ainda n entendi...sou leigo em jquery... Por isso postei o código... relendo o meu código achei um erro de lógica. O "abaixar da barra de rolagem acontece toda vez que existe uma palavra igual a minha <tr>. Sendo assim. Msm que ela esteja no começo a palavra q procuro, ele fara a barra descer.

 

Precisa de uma ajuda para entender se preciso colocar um outro if ou não...se tenho q delimitar um tamanho.

 

To bem perdido.

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

ele não esta dentro? se quiser fique avontade em replicar parte do codigo. para uma melhor explanação.



se você tiver a oportunidade...e se quiser...você pode pode testar...que você vai ver q se vc digitar de Exemplo: Ruiva e busca e seleciona de vermelho. Mas o primeiro e segunda elemento nunca.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consigo. e por saber o que ele esta fazendo acredito que o fato deu ter colocado isso:

 

$(destiny).closest('div').animate({scrollTop:offset.top},1000);

 

na condição de verdade do IF.

 

Obrigado pela sua atenção

 

;)



esta fazendo msm quando nao precisaria..

Compartilhar este post


Link para o post
Compartilhar em outros sites


$(destiny).find('td').each(function(){

$(this).removeClass('active');

 

if(valor != '' && $(this).text().toLowerCase().indexOf(valor) != -1){

offset = $(this).closest('tr').offset();

$(this).addClass('active');

}

// SEU IF ACABA AQUI

});

 

$(destiny).closest('div').animate({scrollTop:offset.top},600);

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

certo...Eu mudei para colocar a execução dentro do if

 

$(destiny).find('td').each(function(){
$(this).removeClass('active');
if(valor != '' && $(this).text().toLowerCase().indexOf(valor) != -1){
offset = $(this).closest('tr').offset();
$(this).addClass('active');
$(destiny).closest('div').animate({scrollTop:offset.top},1000);
}
});
}
Mesmo assim ele não funciona muito bem...Quando eu digito loira por exemplo ele parece que tem vida própria. kkkk
agradeço muito pela ajuda prestada.
E caso conseguir vou postar a resposta aqui para compartilhar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha consegui assim...

 

function PesquisarURL(target, destiny)
{
valor = target.value.toLowerCase();
var list = document.getElementById(destiny);
for (var i = 0; i < list.length; i++)
{
list.options.selected = false;
}
for (var i = 0; i < list.length; i++)
{
if (list.options.text.toLowerCase().indexOf(valor) != -1)
{
list.options.selected = true;
break;
}
}
}
No entanto não funciona no Chrome.
Alguem tem alguma ideia pq?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.