Autocomplementador en AJAX
Como hacer un Autocomplementador simple en AJAX
Pasos para la implementación de éste módulo:
- incluir el siguiente .js entre las etiquetas
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?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!';
}
}
?>
Si usais SMARTY, habría que poner incluso menos código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
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>';
}
?>
Esta entrada está licenciada bajo
CC BY 4.0
por el autor.