El código JS que implementa la función de filtrado de entrada de selección del componente SELECT es el siguiente:
/*** La parte entre // ****** muestra el código de función agregado en el código que no selecciona la función de filtrado de entrada ** // ***@Description Este complemento le permite hacer un cuadro de selección editable como un cuadro de texto mientras mantiene sus características de opción de selección*@Description No se requieren heticias o imágenes para ejecutar el complemento ** @version 0.0.1*@author martin* @@Al-Armense Attrutution 3.0 Unported (cc by-nc 3.0)* @license para uso comercial por favor contácteme: martin.mende (at) aristech.de** @requires jQuery 1.9+** @class editableLect* @memberof jQuery.fn ** @ejemplo ** var selectbox = $ ("select"). agregado ");*/(function ($) {$ .fn.editableElect = function () {var instanceVar; // this este.each () se refiere a la transferencia del objeto actual. El objeto actual aquí se refiere a la transferencia de la transferencia de dos objetos de selección descendente uno por uno por uno. selectif (OriginalSelect [0] .tagname.ToUpperperCase () === "Seleccionar") {// Wrap La selección original inserta el cuadro <div> </div> en el cuadro original <elect> perifery de la <select> OriginalSelect.wrap ($ ("<div/>"); var WrapPer = Originalselect.parent (); WRAPPER.CAPPAPER.CAPS (»{» {»{{» {scente: {{{»{» {scho sports: {{{»{{» {scente: {{{»{{» {{»{scape: {{» {{»{scape: {{» {{{»{{» {{» "Inline-Block"}); // Coloque una entrada que represente la selección editable // Agregue el cuadro de entrada de entrada en el menú de selección <Input Alt Title ..... Value = ""> var inputSelect = $ ("<input/>"). InsertBefore (OriginalSelect); // Obtener y eliminar el IDVAR original objid = OriginalSelect.attr ("ID");; OriginalSElect.RemoVeattr ("id"); // Agregue los atributos de la selección original // Establecer varios atributos del cuadro de entrada de entrada InputSelect.Attr ({Alt: OriginalSelect.Attr ("Alt"), Title: OriginalSelect.Attr ("Title"), class: OriginalsElect.Attr ("" ClassSelect.Attr ("name"), "Title"), class. OriginalSelect.Attr ("Discapeded"), TabIndex: OriginalSelect.Attr ("tabindex"), id: objid}); // Obtenga las propiedades CSS editables de SelectVar RightPadding = 15; InputSelect.css ({Width: OriginalsElect.Width ()-RightPadding, altura: Originalselect.Hheight (), FontalsElect. OriginalsElect.css ("FontFamily"), FontSize: OriginalsElect.css ("FontSize"), Background: OriginalSelect.css ("Background"), Paddingright: RightPadding}); inputSelect.val (OriginalSelect.val ()); // Agregar el triangle en el víndico triangle = = $ ("<div/>"). 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.Hheight ()/2) -5, izquierda: inputSelect.width ()+derecha-10, Margotbattm. "-7px", PointerEvents: "Ninguno"}). InsertAfter (inputSelect); // Cree la lista seleccionable que aparecerá cuando la entrada obtenga enfoque // Al enfocar, agregue el <ol> <ol /> desplegable el cuadro Var selectList = $ ("<Ol />"). CSS ({Display: "Ninguno", ListStyletype: "Ninguna", Width: InputSelect.outer. 0, margen: 0, borde: "sólido 1px #ccc", fontfamily: inputSelect.css ("fontfamily"), fontsize: inputSelect.css ("fontsize"), fondo: "#fff", posición: "absoluto", zindex: 1000000}). Insertar (triangle); // storage // storage data in theinthewdow-box in the tall in the tall in the tall in the theinthewtow ResourceCedata variable // ****** var resourdCedata = []; OriginalsElect.Children (). Cada (función (index, valor) {prepareOption ($ (valor) .Text (), wrappers); resourcedata.push ($ (valor) .Text ());}); // ********** 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, los datos con los caracteres en V se encontrarán en todos los datos almacenados en el cuadro desplegable original y presionados en la variable NewResourCedata // ******* var v = inputSelect.val (); var newResourCedata = []; if (v! = "") {$ .Each (ResourceData, function (i, t) {if (t.indexoF (v)! -1) newResourCedata.push (t);});} wrapper.children ("ol"). Vacía (); $. Cada (newResourCedata, function (i, t) {prepareOption (t, wrapper);}); // *******}). Blow (function () {select.fadeout (100); }). keyUp (function (e) {if (e.which == 13) inputSelect.trigger ("Blur"); // Eventos ejecutados cuando se presiona la tecla Intro Actual -1) newResourCedata.push (t);});} wrapper.children ("ol"). Vacía (); $. Cada (newResourCedata, function (i, t) {prepareOption (t, wrapper);}); // *******});//ocultar el elementiginalalselect.csss ({Visibility: "HISPILITI "Ninguno"}); // Guardar esta instancia para devolver itinstancevar = inputSelect} else {// no es un selectreturn false;}}); // - finalizar cada/** público Methodes ** // *** agrega una opción a la selección de editable*@param {String} - el valor de las opciones*@returns {Void}*/instance. instanceVar.Parent ()); };/*** elimina una opción específica de la selección editable* @param {string, número} valor - el valor o el índice para eliminar* @returns {void}*/instanceVar.removeOption = function (valor) {switch (typeOf (value)) {case "Número": instanceVar.Parent (). Children ("ol"). Children (": nth ("+valor+")"). remove (); break; caso "String": instanceVar.Parent (). Children ("OL"). Children (). Cada (función (index, opcionValue) {if ($ (opcionValue) .Text () == value) {$ (opcionValue) .remove ();}}); ruptura;}};/*** Resetín de la selección de selección de Select a It's Original*@returns {void}*/}** = function () {var OriginalSelect = instanceVar.Parent (). Children ("Select"); var objid = instanceVar.attr ("id"); instanceVar.Parent (). ANTES (OriginalSElect); InstanceVar.Parent (). objid});}; // devuelve el InstanceReTurn instanceVar;};/** Métodos privados ** //// La función de preparación es para agregar una nueva función de opción PrepareOption (valor, wrapper) {var selectOption = $ ("<li>"+valor+"</li>"). AppendTo (wrapper.children ("ol")); var inputelect = = wrapper.children ("input"); selectOption.css ({padding: "3px", textalign: "left", cursor: "pointer"}). Hover (function () {selectOption.css ({en segundo plano: "#EEE"});}, function () {select.csss ({{BackgroundColor: "#EEE"});}, function () {selectOption.cssss ({Backgroundcolor: "#EEE"}); }); // Bind Haga clic en esta opción Electoption.click (function () {inputSelect.val (selectOption.Text ()); inputSelect.Rigger ("Change");}); }} (jQuery));