Autocomplementador en AJAX

Como hacer un Autocomplementador simple en AJAX

Autocomplementador en AJAX 2

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”]
&lt;?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-&gt;real_escape_string($_POST[‘queryString’]);

// Is the string length greater than 0?

if(strlen($queryString) &gt;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-&gt;query(&quot;SELECT your_column FROM your_db_table WHERE your_column LIKE ‘$queryString%’ LIMIT 10&quot;);
if($query) {
// While there are results loop through them – fetching an Object (i like PHP5 btw!).
while ($result = $query -&gt;fetch_object()) {
// Format the results, im using &lt;li&gt; for the list, you can change it.
// The onClick function fills the textbox with the result.

// YOU MUST CHANGE: $result-&gt;value to $result-&gt;your_colum
echo ‘&lt;li onClick=&quot;fill(”.$result-&gt;value.”);&quot;&gt;’.$result-&gt;value.’&lt;/li&gt;’;
}
} 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!’;
}
}
?&gt;
[/code]

Otro artículo de Interés:  Truco pasar un documento Word a HTML

Si usais SMARTY, habría que poner incluso menos código:
[code lang=”php”]
&lt;?
include(&quot;/ruta_smarty_donde_teneis/config.php&quot;);
include_once(&quot;/ruta_smarty_donde_teneis/sql.lib.php&quot;);
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=&quot;SELECT NOMBRE_CAMPO FROM NOMBRE_TABLA WHERE NOMBRE_CAMPO LIKE ‘$busqueda%’ LIMIT 10&quot;;
$db-&gt;query($sql_search);
//$searching = $db-&gt;fetchObject();
while ($searching = $db -&gt;fetchObject())
{
echo ‘&lt;li onClick=&quot;fill(”.$searching-&gt;NombreFamoso.”);&quot;&gt;’.$searching-&gt;NombreFamoso.’&lt;/li&gt;’;
}

?&gt;
[/code]

2 comentarios en «Autocomplementador en AJAX»

  1. 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.

    Responder

Deja un comentario

Enable Notifications    Ok No thanks