Como hacer un Autocomplementador simple en AJAX
Pasos para la implementación de éste módulo:
- incluir el siguiente .js entre las etiquetas <head></head>
Ver .js
y las funciones javascript que podréis ver en la Demo Online
- Incluir también los estilos predeterminados, también los podréis ver en el código fuente de éste archivo.
- En la carpeta donde se encuentra éste ejemplo hay un php «rpc.php» que contiene la llamada a la base de datos y el cual devuelve el contenido.
[code lang=»php»]
<?php
// PHP5 Implementation – uses MySQLi.
// mysqli(‘localhost’, ‘yourUsername’, ‘yourPassword’, ‘yourDatabase’);
$db = new mysqli(‘localhost’, ‘USERNAME’ ,’PASSWORD’, ‘DATABASE’);
if(!$db) {
// Show error if we cannot connect.
echo ‘ERROR: Could not connect to the database.’;
} else {
// Is there a posted query string?
if(isset($_POST[‘queryString’])) {
$queryString = $db->real_escape_string($_POST[‘queryString’]);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
// Run the query: We use LIKE ‘$queryString%’
// The percentage sign is a wild-card, in my example of countries it works like this…
// $queryString = ‘Uni’;
// Returned data = ‘United States, United Kindom’;
// YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
// eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE ‘$queryString%’ LIMIT 10
$query = $db->query("SELECT your_column FROM your_db_table WHERE your_column LIKE ‘$queryString%’ LIMIT 10");
if($query) {
// While there are results loop through them – fetching an Object (i like PHP5 btw!).
while ($result = $query ->fetch_object()) {
// Format the results, im using <li> for the list, you can change it.
// The onClick function fills the textbox with the result.
// YOU MUST CHANGE: $result->value to $result->your_colum
echo ‘<li onClick="fill(».$result->value.»);">’.$result->value.’</li>’;
}
} else {
echo ‘ERROR: There was a problem with the query.’;
}
} else {
// Dont do anything.
} // There is a queryString.
} else {
echo ‘There should be no direct access to this script!’;
}
}
?>
[/code]
Si usais SMARTY, habría que poner incluso menos código:
[code lang=»php»]
<?
include("/ruta_smarty_donde_teneis/config.php");
include_once("/ruta_smarty_donde_teneis/sql.lib.php");
abrirConexion();// o la funcion que hayas nombrado para crear una conexión
$busqueda= $_POST[‘queryString’]; // $_POST[‘queryString’] es la variable que lleva lo que estamos insertando en el formulario de búsqueda
$sql_search="SELECT NOMBRE_CAMPO FROM NOMBRE_TABLA WHERE NOMBRE_CAMPO LIKE ‘$busqueda%’ LIMIT 10";
$db->query($sql_search);
//$searching = $db->fetchObject();
while ($searching = $db ->fetchObject())
{
echo ‘<li onClick="fill(».$searching->NombreFamoso.»);">’.$searching->NombreFamoso.’</li>’;
}
?>
[/code]
Buenas Tardes. Me gustaría saber como modifico el código para que pueda tener varios autocomplementadores en una misma página , osea, tengo varias cajas en un formulario a las que me gustaría ponerles esa función , pues todas buscan diferentes informaciones entre muchos datos . Muchas Gracias por su colaboración.
No encuentro el codigo JS por ningun lado