Ir para conteúdo

POWERED BY:

Arquivado

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

Dodo15

Busca interna

Por , em Javascript

Recommended Posts

Dodo15    0

Dodo15
Postado

Boa noite

Alguem sabe algum tutorial ensinando a fazer um sistema de busca interna com o Javascript, eu tenho aproximadamente 500 itens, e estao em divs.

Existe algum tutorial que eu possa fazer essa busca entre essas divs?

 

Vlw pela ajuda

té mais

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrique    0

Patrique
Postado

Tu tem algum exemplo disso? pois desconheço que de pra fazer isso com apenas javascript, em asp faria de mole com xmlhttp mas em javascript puro sei lá.

Compartilhar este post

Link para o post
Compartilhar em outros sites

augustoclaro    2

augustoclaro
Postado

acredito que com ER dá pra fazer.

 

Você cria um looping entre todos os elementos e verifica o conteúdo com ER a partir do valor buscado, se o valor bater, adiciona o id da div em uma stirng, separado por vírgula.

 

Depois dá um split, esconde todas as divs, e faz um for com a array deixando visível todas as divs com o conteúdo semelhante ao buscado.

 

Só não faço um exemplo porque sinceramente não manjo nada de ER.

 

Olá!

 

Eu dei uma pesquisada em expressões regulares e consegui fazer um exemplo aqui que pode ajudar:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script src="jquery.js"></script>
<script>
var str;
$(document).ready(function(){
$("#kw").keyup(function(event){
	str = $("#kw").val();
	var er = new RegExp(str,"im");
	$("#divs div").stop().hide(1000);
	$("#divs div").each(function(){
		val = $(this).html();
		if (er.test(val)){
			$(this).stop().show(1000);
		}
	});
	//alert(ids);
});
});
</script>
<style>
.box{
border:2px solid black;
background:#999;
width:100px;
height:100px;
}
</style>
</head>

<body>
<form onsubmit="return false;">
Busca: <input type="text" name="kw" id="kw" />
</form>
<hr />
<div id="divs">
<div class="box" id="div1">
Teste 1!
</div>
<div class="box" id="div2">
Pudim!
</div>
<div class="box" id="div3">
Pulícia!
</div>
<div class="box" id="div4">
Terere!
</div>
</div>
</body>
</html>

 

Obs: Precisa ter o jquery na mesma pasta e com o nome de "jquery.js"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrique    0

Patrique
Postado

Hum, interessante, não sabia dessa, vo fazer uns experimentos, valew, acho que isso ai possa ajudar o autor desse tópico.

 

Valew.

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