//Esto this.each() se refiere al recorrido del objeto actual. El objeto actual aquí se refiere al recorrido de los dos objetos actuales del cuadro de selección desplegable uno por uno
original originalSelect.wrap($(" < div/>"));
var wrapper = originalSelect.parent();
wrapper.css({display: "inline-block"});
//coloca una entrada que representará la selección editable
//Agrega un cuadro de entrada al menú de selección
var inputSelect = $("
//obtener y eliminar la identificación original
var objID = originalSelect.attr("id");
originalSelect.removeAttr("id");
//agrega los atributos de la selección original
//Varias configuraciones de atributos del cuadro de entrada
inputSelect.attr({
alt: originalSelect.attr("alt"),
título: originalSelect.attr("título"),
clase: originalSelect.attr("clase"),
nombre: originalSelect.attr("nombre"),
deshabilitado: originalSelect.attr("deshabilitado"),
tabindex: originalSelect.attr("tabindex"),
id: objID
});
//obtiene las propiedades CSS editables del select
var rightPadding = 15;
inputSelect.css({
ancho: originalSelect.width()-rightPadding,
alto: originalSelect.height(),
fontFamily: originalSelect .css("fontFamily"),
tamaño de fuente: originalSelect.css("fontSize"),
fondo: originalSelect.css("fondo"),
paddingRight: rightPadding
});
inputSelect.val(originalSelect.val());
//agrega el triángulo a la derecha
var triángulo = $("
").css({ altura: 0, ancho: 0,
borderLeft: "5px sólido transparente",
borderRight: "5px sólido transparente",
borderTop: "7px sólido #999",
posición: "relativa",
arriba: -(inputSelect.height()/2)-5,
izquierda: inputSelect.width()+rightPadding-10,
marginBottom: "-7px",
pointerEvents: "ninguno"
}).insertAfter(inputSelect);
//crea la lista seleccionable que aparecerá cuando la entrada se enfoque
//Agrega
var selectList = $("
display: "none",
listStyleType: "ninguno",
ancho: inputSelect.outerWidth()-2,
relleno: 0,
margen: 0,
borde: " sólido 1px #ccc",
fontFamily: inputSelect.css("fontFamily"),
fontSize: inputSelect.css("fontSize"),
fondo: "#fff",
posición: "absoluta",
zIndex: 1000000
}).insertAfter(triangle);
//agregar opciones
//Almacenar todos los datos en el cuadro desplegable actual en la variable ResourceData
//******
var ResourceData = [];
originalSelect.children().each(función(índice, valor){
prepareOption($(valor).text(), contenedor );
recursoData.push($(valor).text());
});
//******
//vincula el controlador de enfoque
//Cuando el mouse está enfocado, se desvanece (100), es decir, tira hacia abajo para mostrar el cuadro desplegable actual
inputSelect.focus(function(){
selectList.fadeIn(100);
//v almacena el contenido ingresado en el cuadro de entrada de entrada. Si el contenido de entrada no está vacío, busque los datos con los caracteres en v entre todos los datos almacenados en el cuadro desplegable original e introdúzcalos en la variable newResourceData. p>
//******
var v = inputSelect.val();
var newResourceData = [];
if (v ! = "") {
$.each(resourceData, function(i, t){
if(t.indexOf(v) != -1)
newResourceData.push(t);
});
}
wrapper.children("ol").empty();
$.each(newResourceData, function(i, t){
prepareOption(t, wrapper);
});
// ******
}).blur(function(){
selectList.fadeOut(100);
}).keyup (function( e){
if(e. Which==13) inputSelect.trigger("blur");
//Se ejecuta cuando aparece la tecla de método abreviado Intro después de presionar it Event
//******
var v = inputSelect.val();
var newResourceData = [];
if(v != "") {
$.each(resourceData, function(i, t){
if(t.indexOf(v) != - 1 )
newResourceData.push(t);
});
}
contenedor.
niños("ol").empty();
$.each(newResourceData, function(i, t){
prepareOption(t, wrapper);
});
//******
});
//ocultar elemento original
originalSelect .css({visibility: "hidden", display: "none"});
//guarda esta instancia para devolverla
instanciaVar = inputSelect
}else{
//no es una selección
return false;
}
});//-finaliza cada
/** métodos públicos **/
/**
* Agrega una opción a la selección editable
* @param {String } valor: el valor de las opciones
* @returns {void}
*/
stanceVar.addOption = function(value){
prepareOption(value, eventVar.parent());
};
/**
* Elimina una opción específica de la selección editable
* @param {String, Number} valor: el valor o el índice a eliminar
* @returns {void}
*/
instanciaVar.removeOption = función(valor){
switch(tipode(valor)){
caso "número":
instanciaVar.parent().children ("ol").children(":nth("+value+")").remove();
break
case "string":
instanciaVar.parent().children("ol").children().each(function(index, optionValue){
if($(optionValue).text()==valor) {
$(optionValue).remove();
}
});
romper;
}
};
/**
* Restablece la selección a su original
* @returns {void}
*/
instanciaVar.restoreSelect = function(){
var originalSelect = instanciaVar.parent().children("select");
var objID = instanciaVar.attr("id");
instanciaVar.parent().before(originalSelect);
instanciaVar.parent().remove();
originalSelect.css({visibilidad: "visible", display: "inline-block"});
originalSelect.attr({id: objID});
};
//devuelve la instancia
return eventVar;
};
/** métodos privados **/
//La función de prepareOption es agregar nuevas opciones en el cuadro desplegable actual
function prepareOption(value, wrapper){
var selectOption = $("
"+valor+" ").appendTo(wrapper.children("ol")); var inputSelect = wrapper.children("input");
selectOption.css({
padding: "3px",
textAlign: "izquierda",
cursor: "puntero"
}).hover(<
/p>
función(){
selectOption.css({backgroundColor: "#eee"});
},
función() {
selectOption.css({backgroundColor: "#fff"});
});
//vincula y haz clic en esta opción
selectOption.click(function(){
inputSelect.val(selectOption.text());
inputSelect.trigger("cambiar");
});
}
}( jQuery ));