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.
    <?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:

    <?
    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>';
    }

    ?>

Tags de búsquedas:

jquery

  • Posts Relacionados:

    • Cakephp ajax start voting. Sistema de votaciones en ajax mediante estrellas Hace mucho tiempo que he implementado en un site en cakephp, un sistema de votaciones con estrellas que funciona con ajax. Fue bastante complejo y me llevó un tiempo, ahora...
    • ajax y jquery en cakephp En este post voy a explicar como es de simple usar ajax y jquery en cakephp. Se puede usar ajax para muchos temas, guardar los checkbox de un formulario sin...
    • Seguridad en Linux. Instalar chkrootkit Un rootkit es una herramienta, o un grupo de ellas que tiene como finalidad esconderse a sí misma y esconder otros programas, procesos, archivos, directorios, claves de registro, y puertos...
    • PHP meter una sentencia if dentro de un echo Digamos que quieres hacer algo así: echo '<option value="'.$value.'"'.if($value=='España') echo 'selected="selected"';.'>'.$value.'</option>'; Esto claro está va a fallar porque no se puede meter sentencias de control dentro de un echo. Para...
    • obtener el nombre del dominio con javascript Pues algo que acabo de hacer y no sabía. Sacar el nombre del dominio de la web en la que estás. Mediante JavaScript podemos obtener la información del dominio de...

  • Deja tu comentario

    Nombre:

    Email (no será publicado)

    Website

    Comentario

    Colabora, añade +1 a mi blog!!