Listas desplegables editables (Selects editables)
Hace tiempo hice un clon del dreamweaver en html y javascript, que te permitia editar una página web online, el tema es que podías seleccionar un enlace (de entre otras cosas) y te aparecían las opciones en el panel de propiedades, con lo que podías seleccionar una opción de un select (por ejemplo el target) y se actualizaba solo el código html. Bien, el problema vino cuando intenté configurar una opción igual que la del dreamweaver, que me permitiera añadir valores al select, en un principio no super como hacerlo pero al final, despues de surfear por la red encontré la solución a mis problemas: "clip:rect()".
Siguiendo con el reto de hacer un select que permitiese introducir texto, terminé montando una librería que llamando a un objeto con ciertos parametros te permite crear algo completamente igual al select del dreamweaver.
Puedes ver un ejemplo pulsando en: Listas desplegables editables
El código para crear el select es bien sencillo, ya que está encapsulado en un objeto:
-
var opciones = new Selector("ejemplo","divID",100,funcionDeRetorno,["","ESTO","ES","UN","SELECTOR","QUE","PERMITE","INPUT","DE","TEXTO"]);
Como veis, el objeto requiere de 5 argumentos, dos de los cuales son opcionales:
- Nombre del campo: aquí especificamos el "name" del select, de forma que luego desde el form nos llegue la info correctamente.
- ID de la capa: esta ID nos servirá para luego posicionar la capa o bien darle estilos.
- Ancho: el ancho del select.
- Función de retorno: es la función que se lanza cada vez que se selecciona una opción o bien cuando se introduce una nueva opción y se preciona "enter", este argumento es opcional.
- Valores: en formato de array, se tienen que pasar los valores que se utilizarán en el select. Este argumento tambien es opcional.
Como he comentado, los dos últimos argumentos son opcionales, pero si queremos definir unos valores y no queremos definir una función de retorno, solo tenemos que introducir "null" o "false" en el lugar de la función de retorno.
El código que hace funcionar todo esto es:
-
Selector = function(padre,id,ancho,callback,opt){
-
this.div = document.createElement("div");
-
var div = this.div;
-
div.style.position = "relative";
-
div.style.width = ancho + "px";
-
div.style.cssFloat = "left";
-
div.style.styleFloat = "left";
-
div.id = "selector-div-" + id;
-
this.inp = document.createElement("input");
-
var inp = this.inp;
-
inp.style.zIndex = 2;
-
inp.style.width = (ancho-18) + "px";
-
inp.style.clip = "rect(0px "+ (ancho - 18) +"px 25px 0px)";
-
inp.id = "selector-input-" + id;
-
inp.name = id;
-
inp.parent=this;
-
inp.onkeyup=function(e){
-
if(!e){var e=window.event;}
-
if(e.keyCode==13){
-
this.parent.setValor(this.value,this.value);
-
this.parent.sel.value = this.value;
-
this.parent.sel.$onchange(this.parent.sel);
-
}
-
}
-
this.sel = document.createElement("select");
-
var sel = this.sel;
-
sel.style.zIndex = 1;
-
sel.style.width = ancho + "px";
-
sel.style.clip = "rect(0px " + ancho + "px 25px 82px)";
-
sel.id = "selector-select-" + id;
-
sel.parent=this;
-
sel.onchange=function(){
-
this.parent.inp.value=this.value;
-
this.$onchange(this);
-
}
-
/* COMUNS */
-
inp.style.position = sel.style.position = "absolute";
-
inp.style.top = sel.style.top = 0;
-
inp.style.left = sel.style.left = 0;
-
-
if(typeof callback == "function"){
-
sel.callback =callback;
-
sel.$onchange=function(e){e.callback(e.value);}
-
}
-
-
try{
-
for(var i=0;i
-
this.setValor(opt[i],opt[i]);
-
}
-
}catch(e){}
-
-
div.appendChild(inp);
-
div.appendChild(sel);
-
document.getElementById(padre).appendChild(div);
-
};
-
Selector.prototype.setValor=function(label,value){
-
this.sel.options[this.sel.options.length] = new Option(label,value);
-
}
Y de regalo, el método "setValor", el cual nos permitirá añadir valores "al vuelo" a nuestro selector.
-
var s = new Selector("ejemplo","idejemplo",200);
-
s.setValor("label","value");
Ya se que no se pueden añadir etiquetas + valores en el argumento inicial, pero eso lo dejo para un futura revisión si alguien me lo pide para ser utilizado, claro.
El enlace directo al archivo para ser descargado está aquí: Listas desplegables editables (selects editables)
Comentarios
Hola, muy bueno el script, como lo integro a un formulario comun?
Es increible como algunos se complican la vida para hacer algo tan simple.
Para tener un ComboBox editable, lo único que hay que hacer es crear un “input text” y un “select” que se solapen uno encima de otro, de modo que el input text quede siempre por encima pero un poco más corto para que no oculte el boton de desplegar las opciones del “select”.
Y cuando el usuario despliege el select y elija una opción, solo hay que utilizar el evento “onChange” para pasar el valor del “select” al “input text”.
Para aquellos que no lo sepan, pueden solapar dos elementos sin necesidad de definirlos como “absolute” (que siempre es engorroso), encapsulandolos dentro de un “div” de 0px de ancho.
Aquí teneis el código… simple y eficiente.
Select editable
———————Elija una opción———————
Opcion 1
Opcion 2
Opcion 3
Opcion 4
Creado por Miquel Abadal.
Deja un comentario