Red de conocimiento informático - Material del sitio web - Cómo implementar la función de filtrado de entrada de selección del componente de selección

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);

//comprueba si el elemento es una selección

if(originalSelect[0].tagName.toUpperCase()= = ="SELECT"){

//envuelve la selección original inserta un cuadro

alrededor del

var inputSelect = $("").insertBefore(originalSelect);

//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

      cuando la entrada se enfoca cuadro desplegable de enfoque

      var selectList = $("

        ").css({

        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 = $("

      1. "+valor+"
      2. ").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 ));