Cómo implementar la función de filtrado de entrada de selección del componente de selección
(función ($ ) {
$.fn.editableSelect = función() {
var instanciaVar;
//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
this.each(function(){
var originalSelect = $(this);
//comprobar si el elemento es una selección
if(originalSelect[0].tagName.toUpperCase()= = ="SELECT"){
//envuelve el cuadro de selección original lt;divgt;lt;/divgt; alrededor del cuadro lt;selectgt; original
originalSelect.wrap( $ ("lt;div/gt;"));
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. entrada alt título ..... style="width： ......" value=""gt;
var inputSelect = $("lt;input/gt;").insertBefore(originalSelect);
//obtener y elimine la identificación original
var objID = originalSelect.attr("id");
originalSelect.removeAttr("id");
//agregar 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"),
p>
clase: originalSelect.attr("clase"),
nombre: originalSelect.attr("nombre"),
deshabilitado: originalSelect.attr("deshabilitado" ),
tabindex: originalSelect.attr("tabindex"),
id: objID
});
//get las propiedades CSS editables de select
var rightPadding = 15;
inputSelect.css({
width: originalSelect.width()-rightPadding,
p>
altura: originalSelect.height(),
fontFamily: originalSelect.css("fontFamily"),
fontSize: originalSelect.css(" fontSize"),
fondo: originalSelect.css("fondo"),
paddingRight: rightPadding
});
inputSelect .val(originalSelect. val());
//agrega el triángulo de la derecha
var Triangle = $("lt;div/gt;").css({
altura: 0, ancho: 0,
borderLeft: "5px sólido transparente",
borderRight: "5px sólido transparente",
borderTop: " 7px sólido #999",
posición: "relativa",
top: -(inputSelect.hei
ght()/2)-5,
izquierda: inputSelect.width() rightPadding-10,
marginBottom: "-7px",
pointerEvents: "none"
}).insertAfter(inputSelect);
//crea la lista seleccionable que aparecerá cuando la entrada se enfoque
//enfocada Cuándo agregando lt; olgt; lt; ol/gt; cuadro desplegable
var selectList = $("lt;ol/gt;").css({
display: " none",
listStyleType: "none",
ancho: inputSelect.outerWidth()-2,
padding: 0,
margen: 0,
borde: "solid 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).t
text());
});
//******
//vincula el controlador de enfoque
//Cuando el mouse está enfocado, fadeIn(100), es decir, deslícelo hacia abajo para mostrar el cuadro desplegable actual
inputSelect.focus(function(){
selectList. fadeIn(100);
//v almacena el contenido ingresado en el cuadro 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 drop original. -hacia abajo y empújelo en la variable newResourceData
//******
var v = inputSelect.val()
var newResourceData; = [];
if(v != "") {
$.each(resourceData, función(i, t){
if(t .indexOf(v) != -1)
newResourceData.push(t
});
}
contenedor; .children("ol").empty() ;
$.each(newResourceData, function(i, t){
prepareOption(t, wrapper);
});
//******
}).blur(function(){
selectList.fadeOut(100) ;
}). keyup(function(e){
if(e.what==13) inputSelect.trigger("desenfoque");
//Rebota después de presionar la tecla de método abreviado Intro. Eventos ejecutados cuando
//******
var v = inputSelect.va
l();
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, contenedor);
});
//******
}); > //ocultar elemento original
originalSelect.css({visibility: "hidden", display: "none"});
//guarda esta instancia para devolverla
instanciaVar = inputSelect
}else{
//no es una selección
return false
}
}); //-finalizar cada
/** métodos públicos **/
/**
* Agrega una opción al selección editable
* @param {String} valor: el valor de las opciones
* @returns {void}
*/
instanciaVar .addOption = función(valor){
prepareOption(valor, instanciaVar.parent()
}; p> * Elimina una especificación
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();
}
}); ;
}
};
/**
* Restablece la selección a su original
* @returns {void}
*/
instanciaVar.restoreSelect = function(){
var originalSelect = instanciaVar.parent().children("seleccionar" );
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 instanciaVar
}; > /** métodos privados **/
//La función de prepareOption es agregar nuevas opciones al cuadro desplegable actual
function prepareOption(value, wrapper){
var selectOption = $("lt;ligt;" valor "lt;/ligt;").appendTo(wrapper.children("ol"));
var inputSelect = contenedor .children( "entrada");
selectOption.css({
padding: "3px",
textAlign: "izquierda",
cursor: "puntero"
}).hover(
function(){
selectOption.css({backgroundColor: "#eee"} );
},
function(){
selectOption.css({backgroundColor: "#fff"}); });
//vincula y haz clic en esta opción
selectOption.click(function(){
inputSelect.val(selectOption.text());
inputSelect.trigger("cambiar");
}
}
}( jQuery )); >