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 <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.
    &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;

Si usais SMARTY, habría que poner incluso menos código:

    &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;

2 opiniones 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *