Google hace poco lanzó su nuevo buscador llamado Google Instant el cual te permite encontrar lo que estás buscando en menor tiempo debido a que los resultados van a apareciendo mientras estás escribiendo tu búsqueda. Google Instant involucra varias tecnologías, una de ellas es una muy inteligente que trata de adivinar lo que estás buscando.ç
Lamentablemente esta tecnología no está disponible para que nosotros la implementemos en nuestro sitio web, pero podemos hacer algo similar con PHP y jQuery y aquí vamos a crear un código más simple, con el fin de aprender cómo funciona, y por su puesto lo puedes ajustar a la perfección con su propio proyecto.
En la siguente imagen puedes ver como funciona un buscador instantáneo, y los elementos que éste tiene:
El código HTML de este formulario es realmente simple como el siguiente:
<html>
<head>
<title>Instant Search</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
</head>
<body><!– Formulario –>
<form method=”get” action=””>
<input type=”text” id=”q” name=”q” />
<input type=”submit” value=”Search” />
</form><!– Contenedor de los resultados –>
<div id=”results”></div></body>
</html>
El código JavaScript que vas a usar es el siguiente:
<script type="text/javascript">//Identify the typing action
var runningRequest = false;
var request;
$(‘input#q’).keyup(function(e){
e.preventDefault();
var $q = $(this);if($q.val() == ”){
$(‘div#results’).html(”);
return false;
}//Abort opened requests to speed it up
if(runningRequest){
request.abort();
}
runningRequest=true;
request = $.getJSON(‘search.php’,{
q:$q.val()
},function(data){
showResults(data,$q.val());
runningRequest=false;
});//Create HTML structure for the results and insert it on the result div
function showResults(data, highlight){
var resultHtml = ”;
$.each(data, function(i,item){
resultHtml+=’<div>’;
resultHtml+=’<h2><a href=”#”>’+item.title+’</a></h2>’;
resultHtml+=’<p>’+item.post.replace(highlight, ‘<span class=”highlight”>’+highlight+’</span>’)+’</p>’;
resultHtml+=’<a href=”#”>Read more..</a>’
resultHtml+=’</div>’;
});$(‘div#results’).html(resultHtml);
}$(‘form’).submit(function(e){
e.preventDefault();
});
});
</script>
El código PHP que necesitarás es el siguiente:
<?phpfunction search() {
if(!empty($_GET['q'])) {
search();
}
$con = mysql_connect(‘localhost’,'root’, ”);
mysql_select_db(‘mydb’, $con);$q = mysql_real_escape_string($_GET['q'], $con);
$sql = mysql_query(”
SELECT
p.title, SUBSTR(p.post,1,300) as post
FROM Posts p
WHERE p.title LIKE ‘%{$q}%’ OR p.post LIKE ‘%{$q}%’
“);//Create an array with the results
$results=array();
while($v = mysql_fetch_object($sql)){
$results[] = array(
‘title’=>$v->title,
‘post’=>$v->post
);
}//using JSON to encode the array
echo json_encode($results);}
?>
El código CSS para este ejemplo es el siguiente:
form{form input[type=submit]{display:none;}
margin:15px;
padding:5px;
border-bottom:1px solid #ddd;
}div#results{
padding:10px 0px 0px 15px;
}div#results div.result{
padding:10px 0px;
margin:10px 0px 10px;
}div#results div.result a.readMore{color:green;}
div#results div.result h2{
font-size:19px;
margin:0px 0px 5px;
padding:0px;
color:#1111CC;
font-weight:normal;
}div#results div.result h2 a{
text-decoration:none;
border-bottom:1px solid #1111cc;
}div#results div.result p{
margin:0;
padding:0;
}span.highlight{
background:#FCFFA3;
padding:3px;
font-weight:bold;
}
Y esto es todo lo que tienes que hacer.
Nota: El proyecto no tiene por qué tener una página específica para esta búsqueda. Puedes utilizar el CSS para ocultar y establecer la posición absoluta al div de los resultados. De esta manera la búsqueda instantánea funcionará en todas las secciones!
(Vía Woork Up)
Yo utilicé un mecanismo análogo, quizás un poco más personalizable, que podéis ver en http://gnewsinstant.com/ y usar libremente.
no me funciona que nombre tengo que poner a los archivos
http://www.segundamano10.com