Crea tu propio buscador

El código HTML de este formulario es realmente simple como el siguiente:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”>script>

<input type=”text” id=”q” name=”q” />

El código JavaScript que vas a usar es el siguiente:




El código PHP que necesitarás es el siguiente:

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úsqueda instantánea funcionará en todas las secciones!
(Vía Woork Up)