TextboxList con Autocompleter

By
tednologia
-
3
56

Si tienes una cuenta en Facebook te habras dado cuenta al enviar mensajes a tus amigos de la forma en que puedes agregar nombres y estos se autocompletan y forman botones con opciones de eliminar, todo esto dentro de un “TextboxList”.

Un TextboxList es una lista aplicada con estilos la apariencia de un textbox, voy a mostrar como hacer esto con unos simples pasos, esta funcion utilizara la libreria mootools.

Primero incluiremos los scripts y hojas de estilo.

<link rel="stylesheet" href="test.css" type="text/css" media="screen" title="Test Stylesheet" charset="utf-8" />
<script src="mootools-beta-1.2b1.js" ></script>
<script src="textboxlist.compressed.js" ></script>
<script src="test.js" ></script>

Los scripts adicionales (textboxlist.compressed.js y test.js) son los que crean los contenidos y realizan el autocompletado respectivamente.
En test.js puedes modificar algunas opciones en la Línea 27:

autocomplete: {
      'opacity': 0.8,   //Opacidad de autocomplete
      'maxresults': 10, //El máximo de resultados
      'minchars': 1     //mínimo de letras para busqueda
    }

Segundo: Dentro del body debemos de escribir el código 

<form id="test-form">
<ol>
    <input type="text" value="" id="facebook-demo" />
    <div id="facebook-auto">
        <div class="default">Escribe un nombre</div>
        <ul class="feed">
          <li>Jorge Luis Borges</li>
          <li>Julio Cortazar</li>
        </ul>
        <!-- Esta lista  se agregara por defecto -->
    </div>
    <a onclick="sendNames()" href="#">Mostrar Lista</a>
</ol>

Esto nos mostrara una caja de texto simple con un contenido poco particular y al momento de seguir escribiendo nombres se expandera. El div con class=”default” sera el mensaje cuando estemos dentro del textList. La lista con class=”feed” nos permite poner por defecto algunos nombres

Ahora dirán como puedo mandar esto por POST o GET si no es realmente un “input”. Para el tercer paso prepare un script que nos hara esto facil.

function sendNames()
{
    var names = "";
    $$('.bit-box').each
    (
        function(e)
        {
            names += e.textContent + ', ';
        }
    );
    names = names.substr(0,(names.length-2));
    alert(names);
}

La función sendNames() nos recorrera todas las listas con class=”bit-box” y nos retornara el contenido en texto, en el recorrido lo concatenamos por comas, y al final quitamos la coma que sobra.
Ahora podemos mandar esto con una peticion Ajax (Ajax Request) al servidor, si el lenguaje que usamos es PHP lo podemos desglosar con la función explode(‘, ‘,$_POST[‘names’]); Esto convertira en un Array por cada ‘, ‘ en la cadena.

Alguna duda, sugerencia, comentario, escribanme.

Recursos:

RELATED ARTICLESMORE FROM AUTHOR

3 COMMENTS

  1. Gracias por todo. No tengo mucha idea con javascript, aunque veo que la demo no funciona, ya que no dá los resultados. De todas maneras, podrías poner como enviarlo con php mediante Post. Gracias.

  2. Muy interesante. Pero como le hago para validar el formato de un email si el usuario los ingresa con puntos y comas?
    En el sitio solo nombran la funcion pero no encuentro la forma de utilizarla

  3. hola, muchas gracias por el tuto, me ha sido muy útil y por fin tengo algo para hacer esto que me gusta y me funciona.
    Pero me he enncontrado con que si el tag que introduce el usuario no está en json.html entonces no lo acepta, qué hay que hacer para que lo acepte? muchas gracias

Comments are closed.