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;

Tags de búsquedas:

busquedas en ajax

Noticias relacionadas »

2 comentarios en Autocomplementador en AJAX

  1. Moisés
    / Responder

    No encuentro el codigo JS por ningun lado

  2. José Luis Marín Guevara
    / Responder

    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 *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Joel (1 semana)
    Este grupo es buenísimo hay personas de todo el mundo…
  • Citricus (2 semanas)
    Análisis muy buenos y detallados: Crypto Trading Campus https://t.me/cryptotradingcampus
  • Vane (1 mes)
    Hola muy buena información, en lo personal mino con Javascript…
  • Gabriel Roncancio (2 meses)
    Hola Pedro, gracias por compartir. Tu artículo me dió algunas…
  • Felix JA (2 meses)
    Os paso el que a mi me funciona mejor y…
  • Julian Rincon (2 meses)
    Yo les voy a dejar un grupo, donde buscamos entre…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
expresiones regulares para parsear un RSS o XML

En este post voy a explicar como eliminar un contenido determinado ya sea una imagen o una etiqueta HTML, que...

Cerrar