Entrada

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.