Crea tu propio Google Instant de manera rápida y sencilla

Todo el mundo está que saca su buscador tipo Google instant, y es que es muy sencillo crear tu propio buscador tipo Google Instant, pero claro no será igual al de Google ya que el de ellos  tienen una tecnologia que trata de adivinar de manera más acertada lo que estás buscando, para eso necesitas recolectar datos de lo que busca la gente. 

[img_assist|nid=4148|title=|desc=|link=none|align=center|width=420|height=241]

Pero bueno hay una manera sencilla de crear tu propio buscador tipo Google Instant, solo hace falta un poco de PHP y jQuery y listo!

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">
var runningRequest = false;
var request; 
//Identify the typing action
$(‘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:

<?php
if(!empty($_GET['q'])) {
search();
function 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{
margin:15px;
padding:5px;
border-bottom:1px solid #ddd;
form input[type=submit]{display:none;}

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úsquedainstantánea funcionará en todas las secciones!

Vía: Techtastico

Sobre msakiya 4245 Artículos
Dictador de Mix.pe visita mi cuenta de Google Plus