content top
Búsqueda al vuelo con jQuery

Búsqueda al vuelo con jQuery

Escrito por Krato en jQuery el 07 de 29 del 2009 | Una Respuesta

Con un sencillo script podremos incluir en nuestra página un buscador al vuelo del tetxo que ésta misma contenga.

Para éste tutorial utilizaremos un plugin externo que se encargará de resaltar el texto que le enviemos. Se trata del Highlight v3 para jQuery. Es muy fácil de usar y nosotros la vamos a utilizar para crear una búqueda “al vuelo” en nuestra página web mediante las herramientas que jQuery nos suministra.

En este caso vamos a crear un campo de texto y con el evnto keyUp de jQuery buscaremos en el texto.

El html de ejemplo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!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>Búsqueda al vuelo con jQuery</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="busca.js" type="text/javascript"></script>
<style type="text/css">
.marca{ background-color: yellow}
 
*{
margin:0;
padding:0;
}
 
li {
	list-style-type:none;
	float:left;
	display:inline;
}
 
p {clear:both; padding-top:30px;}
 
#contenedor{
	margin:30px;
}
 
#muestra {
	padding-left: 10px;
	font-weight:bold;
}
#bus {
	padding-left: 10px;
}
</style>
<body>
<div id="contenedor">
<ul>
  <li><label>
    <input type="text" name="textfield" id="texto" />
  </label></li>
  <li><span id="bus"></span>Texto buscado: <span id="muestra"></span></li>
</ul>
<p>
  Esto es un ejemplo de "búsqueda al vuelo" mediante jQuery. Un sencillo ejemplo  que puedes descargar desde <a href="http://2kblog.net">2kblog.net</a></p>
<p>This is an Example of "fly search" with jQuery. An easy example that can be downloaded from <a href="http://2kblog.net">2kblog.net</a></p>
<p>Este es el código js - This is the js code:</p>
<p>&nbsp;</p>
<code>
$(document).ready(function(){						   
 	jQuery('#texto').keyup(function (e) {
 
			$('body').quitamarca();
			q = $("#texto").val();
			if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});
</code>
<p>Bye</p>
</div>
</body>
</html>

Como veis lo único que cargo es el jQuery de google y el js que he hecho.

Ahora veamos el js que es lo con l0 que funciona la búsqueda:

1
2
3
4
5
6
7
8

$(document).ready(function(){
 $(document).ready(function(){
 	jQuery('#texto').keyup(function (e) {
	  $('body').quitamarca();
	  q = $("#texto").val();
	  if(q != "") {$('body').marca(q);} else {$("#muestra").text(" ");}
	 });
});

Vamos a dividir el código:

  1. Le decimos que la función empieze cuando la tecla se levante con la función keyup. Si lo intentamos con el evento keypress no funcionará ya que la tecla que hayamos pulsado aún no se a añadido al campo de texto por lo que fallará. (He estado un buen rato para esa tontería jeje).
  2. Le quitamos la marca (por si hay alguna). Esto hace que si borramos se actualice la búqueda.
  3. Recogemos en la variable q el texto que hay en el campo con id=texto
  4. Si el campo no tiene nada no busca el texto y resetea el span que muestra el texto que hemos buscado. Si existe algo lo marca. Esto es necesario por si borramos el campo que no falle el javascript y la página se quede colgando.

Y ya tenemos nuestro buscador funcionando!

El css del ejemplo es muy simple pero bastante para ver como funciona ;)

Descarga el ejemplo:

Buscador al vuelo



1 comentario »

  1. Administrador de www.cincolinks.comNo Gravatar says:
    agosto 3rd, 2009

    Enhorabuena por tu blog, si quieres puedes apuntarte al
    directorio web/blog CincoLinks podrás
    promocionar tu web, con tu ficha y tus votaciones y valoraciones, con un método
    de intercambio de visitas llamado 5links! con el que tu blog será visitado
    tanto como visites a los demás y que harán que tu blog se de a conocer por toda
    la red. Pásate ;)

    Creo que no hay muchos blogs de las características y
    temática del tuyo en este directorio, me gustaría mucho que participaras.

    Saludos, espero verte por CincoLinks

RSS feed para los comentarios de esta entrada. TrackBack URL

Deja un comentario