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:
Posts Relacionados
Leave a Reply