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 *

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! »

  • Zein (2 días)
    EXELENTEE!!! MIL PUNTOS PARA TI! si me funcionó a la…
  • señales cryptowhale (3 días)
    https://t.me/SignalsWins
  • carlos hernandez (1 semana)
    Hola, hay alguna funcion k sirva para saber el correo…
  • steven (3 semanas)
    tengo un problema me sale este error cuando pongo data:…
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUFG_xDVJ-PS3cWEYAw este es el enlace me equivoque.
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUBDhw2Uk7D3D835GJQ grupo de telegram latino sudamericano peru, colombia, ecuador, chile,…

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