Búsqueda instantánea con AJAX
Volvemos nuevamente al tema de consultas en MySQL, haciendo uso de AJAX y PHP.
Vía Ribosomatic
En esta oportunidad veremos una busqueda instantánea. Quizás ha notado que algunos blogs tienen su sistema de busqueda de entradas(posts) y que los resultados de la busqueda se cargan en otra página. Aunque existen otros que los resultados aparecen en la misma página haciendo uso de AJAX. Pues bien eso es lo vamos a ver ahora.
Hay que tener en cuenta debemos hacer algunos cambios a nuestra base de datos. ¿Porqué? Cuando buscamos un sólo término o palabra no existe problema, podemos hacer uso de la sentencia SELECT … LIKE contenido=’termino’ OR titulo=’termino’.
Pero, ahora supongamos que queremos buscar una expresión, entonces se deberá buscar si el titulo o contenido del post lo contiene. En ese caso no haremos en trabajo con un simple LIKE debemos hacer algo mas.
Bien entonces empezemos…
Vamos definir los campos de la tabla, la cual usaremos para este ejemplo.
CREATE TABLE `post` ( `idpost` INT( 7 ) NOT NULL auto_increment , `titulo` VARCHAR( 70 ) NOT NULL , `contenido` TEXT NOT NULL , `autor` VARCHAR( 20 ) NOT NULL, KEY `idpost` (`idpost`)) TYPE = MYISAM ;
Bien ahora debemos de crear un índice FULLTEXT, que es útil para el segundo caso explicado, cuando buscamos expresiones o conjuntos de palabras en una tabla. Lo realizamos de la siguiente manera:
ALTER TABLE post ADD FULLTEXT(titulo, contenido);
De esta manera cuando realicemos una busqueda, se trabajará en los dos campos que expecificamos dentro del FULLTEXT. Pero la instrucción de busqueda no será como con el LIKE, sino de la siguiente manera:
SELECT * FROM post WHERE MATCH(titulo, contenido) AGAINST ('$terminos)
La función MATCH … AGAINST … , es usado en consultas en lenguaje natural parecido a como lo hacen los motores de búsqueda.
Nota: La funciónn MATCH … AGAINST … falla a veces cuando la expresión a buscar tiene solo una palabra. Para la busqueda de una sola palabra hacemos uso de LIKE.
Ahora a nuestra aplicación …
Vamos a definir los archivos que realizará el proceso:
- conexion.php >> Datos de la conexión a la base de datos.
- funciones.js >> El objeto XMLHttpRequest que usaremos y otras funciones en JavaScript.
- index.php >> El archivo principal que contendrá el formulario de busqueda.
- busqueda.php >> Realizará la busqueda en si, seleccionará la busqueda adecuada a la expresion ingresada.
conexion.php
Este archivo contiene los datos de la conexión. Recuerde cambiar los datos por los suyos si desea probarlos en su PC.
<?php $bd_host = "localhost"; $bd_usuario = "root"; $bd_password = ""; $bd_base = "ribosomatic"; $con = mysql_connect($bd_host, $bd_usuario, $bd_password); mysql_select_db($bd_base, $con); ?>
funciones.js
Aquí se encuentran las funciones para llamar el objeto XMLHttpRequest y llamar al proceso de busqueda.
function nuevoAjax(){ var xmlhttp=false; try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } }
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); }
return xmlhttp;}
function buscarDato(){ resul = document.getElementById('resultado'); bus=document.frmbusqueda.dato.value;
ajax=nuevoAjax(); ajax.open("POST", "busqueda.php",true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { resul.innerHTML = ajax.responseText } } ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("busqueda="+bus)}
index.php
Definimos el archivo JavaScript que usará la página, es este caso funciones.js. Tambien definimos los estilos. En el evento onsubmit del formulario definimos la función JavaScript que llamará al proceso de busqueda.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" xsrc="funciones.js" mce_src="funciones.js"></script> <style type="text/css"> legend { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; } .titulo{ width:20%; } .contenido{ width:60%; } .autor{ width:15%; } </style> </head> <body> <form name="frmbusqueda" action="" onsubmit="buscarDato(); return false"> <div align="center">Termino a buscar: <input type="text" name="dato" /> </div> </form> <fieldset><legend>Resultado</legend> <div id="resultado"></div> </fieldset> </body></html>
busqueda.php
Este es el archivo principal, dependiendo del término o expresiones ingresadas buscará haciendo uso de un simple LIKE o MATCH … AGAINST.
<?php require('conexion.php'); $busqueda=$_POST['busqueda']; if ($busqueda<>''){ //numero de palabras $trozos=explode(" ",$busqueda); $numero=count($trozos); if ($numero==1) { $cadbusca="SELECT * FROM post WHERE CONTENIDO LIKE '%$busqueda%' OR TITULO LIKE '%$busqueda%' LIMIT 10;"; } elseif ($numero>1) { $cadbusca="SELECT * , MATCH ( TITULO, CONTENIDO ) AGAINST ( '$busqueda' ) AS Score FROM post WHERE MATCH ( TITULO, CONTENIDO ) AGAINST ( '$busqueda' ) ORDER BY Score DESC LIMIT 50;"; }
function limitarPalabras($cadena, $longitud, $elipsis = "..."){ $palabras = explode(' ', $cadena); if (count($palabras) > $longitud) return implode(' ', array_slice($palabras, 0, $longitud)) . $elipsis; else return $cadena; }?><table border="1px"><tbody> <tr> <td class="titulo">Titulo</td> <td class="contenido">Contenido</td> <td class="autor">Autor</td> </tr><?php $result=mysql_query($cadbusca, $con); $i=1; while ($row = mysql_fetch_array($result)){ echo " <tr> <td class="titulo">".$row['titulo']."</td> <td class="contenido">".limitarPalabras($row['contenido'],20)."</td> <td class="autor">".$row['autor']."</td> </tr>"; $i++; }?></tbody></table><?php //cierra el if inicial }?>
Esta es una forma de combinar AJAX con proceso un poco mas avanzados de PHP y consultas MySQL. Pueden descargar el código, y el ejemplo más visible es nuestro propio sistema de búsqueda, por supuesto, mejorado y con algunas características extras.
Yo uso la librería jQuery, muy recomendada (buscar en google) 23 Kb
Creo que el código esta bueno, sin embargo me da un problema quisiera contactar con el desarrolador
Brinda muy buena información, excelente te felicito, pero debería de mejorar el estilo de la interfaz de esta página, debes darle honor a la misma… por lo menos empieza por el tamaño de la letra que es demasiado pequeña, voy a ver que me hecho en los ojos para que no me sigan ardiendo..
@Jhoan , gracias por tu comentario, te prometo que haremos algo al respecto y pronto …
@kondor si quieres deja un mensaje en el Formulario de Contacto
Este codigo es muy util, quedaría perfecto agregandole a la consulta impresa un link por cada registor encontrado, para que abra otra página con pase de variable con la ID del registro para unaconsulta en detalle o para lo q se ocupe.
Si ya lo tienes implementado mucho agradecere si lo compartes, de todos mododos trabajaré sobre el. Grax.
Excelente aporte. Muchas gracias.
Deberias dar credito al programador que realizo el codigo.
Hola Ernesto,
Los creditos estan al principio del post.
Muy buen aporteeeeeeee. Me funciono bastante bien.
Excelente. Ya lo probé y no me funcionó como búsqueda instantánea, entonces tan solo faltaba que a cada letra escrita me haga el envio, con lo cual modifique en index.php
, esto lo cambié por .
Con esto funciona ok. Muchas Gracias.
Funciona bien, lo he adaptado a un sistema de ventas que estoy desarrollando en php y hago la búsqueda de manera instantánea. Pero luego de todo tengo un pequeño problemilla…cuando en la base de datos hay acentos diacríticos o la letra ñ entonces al hacer la búsqueda si escribo solo la letra ñ por ejemplo no me encuentra ninguna palabra, pero si escribo la letra n si me lo incluye, lo mismo pasa con los acentos o tildes, si escribo avión no me lo encuentra pero si lo pongo sin tilde si me lo encuentra, la tilde no me preocupa, pero si la “ñ”. ¿Cómo hago para que me la detecte?…Pensé en una validación por cada caracter que se ingresara y que si escribe ñ que sea como que escribe n, pero ni eso me imagino como implementarlo
@Gian Carlos
Quiero pensar que tu cotejamiento (espero asi se llame) de tu base de datos este bien, en tu base de datos si vez la “ñ”???
deberias de hacer pruebas para que te muestre que informacion estas enviado y com la estas recibiendo.
bueno esas pruebas haria yo, jeje
miren tengo un algoritmo de busqueda mi objetivo es cargar los archivos en una carpeta y sus nombres en una base de datos ya hace lo que quiero pero tengo que repetir la ultima letra para que aparezca mi archivo alguien puede decirme como puedo hacerle para que al pulsar una tecla me mande archivos relacionados a lo que busco este es mi algoritmo.
formulario.html
Buscar:
///////////////////////ajax.js///////////////////////////////////
function nuevoAjax(){
var xmlhttp=false;
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}catch(E){
xmlhttp = false;
} }
if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;}
function consulta(){
capa = document.getElementById(‘g’);
variable=document.b.x.value;
ajax=nuevoAjax();
ajax.open(“POST”, “buscar.php”,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
capa.innerHTML = ajax.responseText
} }
ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
ajax.send(“z=”+variable)
}
///////////////////////////////busqueda.php////////////////////////////////
require(“conexion.php”);
$path=”arc/”;
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {
if ($file != “.” && $file != “..”) {
}
}
$consul=mysql_query(“select*from pdf where descripcion=’$_POST[z]‘”) or die (“error en la sentencia”);
while($row=mysql_fetch_array($consul)){
//$file=$row["nombre"];
$enlace = “http://davis.com/sistema/casi/busqueda/arc/”.$row["nombre"];
echo ““.$row["nombre"].”“;
}
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\xampplite\htdocs\busqueda\busqueda.php on line 41
cunado quiero realizar busqueda de cadenas me manda este error ayuda por favor!!!