Ir para conteúdo

POWERED BY:

Arquivado

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

NBFLancaster

Pesquisar usando scroll

Por , em Javascript

Recommended Posts

NBFLancaster    0

NBFLancaster
Postado
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

NBFLancaster    0

NBFLancaster
Postado

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

NBFLancaster    0

NBFLancaster
Postado

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

NBFLancaster    0

NBFLancaster
Postado

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

Lucas Guima    164

Lucas Guima
Postado 




$(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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
NBFLancaster
			  

	
		
	
			 0
	
		
	

		

		

			


	
		NBFLancaster
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
NBFLancaster
			  

	
		
	
			 0
	
		
	

		

		

			


	
		NBFLancaster
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

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

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito