Der JS -Code, der die Auswahl -Eingabedfilterfunktion der Auswahlkomponente implementiert, lautet wie folgt:
/*** Der Teil zwischen // ****** zeigt den Funktionscode an, der auf dem Code hinzugefügt wird, der nicht die Eingabefilterfunktion auswählt. 3.0 unportiert (CC BY-NC 3.0)* @LICENSE FÜR COMERCIAL UHR Wenden Sie sich bitte an mich: Martin.Mende (at) aristech.de** @Requires jQuery 1.9+** @class redablselect* @Memberof jQuery.fn ** @example ** var selektion = $ ("select". hinzugefügt ");*/(function ($) {$ .fn.EditablesSelect = function () {var InstanceVar; // this this this.each () bezieht sich auf den Traversal des aktuellen Objekts. Das aktuelle Objekt bezieht sich hier auf die Traversal der aktuellen zwei Dropdown-Auswahl. selectif (OriginalSelect [0] .TagName.ToUpperCase () === "SELECT") {// Wickeln Sie das Original aus. "Inline-Block"}); // eine Eingabe platzieren, die das bearbeitbare Select // das Eingangs-Eingangsfeld im Auswahlmenü hinzufügen <Eingabe-Alt-Titel ..... value = ""> var InputSelect = $ ("<eingabe/>"). InsertBefore (Originalselect); // Die ursprüngliche idvar objid = originalSelect.attr ("id"); OriginalSelect.removeAttr ("ID"); // Fügen Sie die Attribute aus dem ursprünglichen SELECT hinzu // Setzen Sie verschiedene Attribute der Eingabe -Eingabe -Box InputSelect.atttr ({Alt: OriginalSelect.attr ("Alt"), Titel: originalSelect.attr ("Titel"), Klasse: OriginSelect.attr ("Klasse"), nameSelect. OriginalSelect.attr ("deaktiviert"), tabIndex: OriginalSelect.attr ("tabIndex"), id: objid}); // Erhalten Sie die bearbeitbaren CSS-Eigenschaften aus der SelectVar RightPadding = 15; InputSelect.css ({width. OriginalSelect.css ("Fontfamily"), fontsize: originalSelect.css ("fontsize"), Hintergrund: OriginalSelect.css ("Hintergrund"), Polsterright: rightPadding}); InputSelect.val (OriginalSelect.val ()); // addieren Sie das Dreikle im richtigen Dreikeln. $ ("<div/>"). CSS ({Höhe: 0, Breite: 0, Borderleft: "5px fest transparent", Borderrechte: "5px solide transparent", Bordertop: "7px solid #999", Position: "Relativ", oben:-(InputSelect.Height. "-7px", Zeiger: "Keine"}). InsertAfter (InputSelect); // Erstellen Sie die ausgewählbare Liste, die angezeigt wird, wenn der Eingang Fokus erhält // beim Fokussieren die <ol> <ol/> Dropdown-Box var selectlist = $ ("<ol/>"). 0, Rand: 0, Grenze: "Solid 1px #ccc", fontfamily: inputSelect.css ("fontfamily"), fontsize: inputSelect.css ("fontsize"), Hintergrund: "#fff", Position: "Absolute", Zindex: 10000000000}). Ressourcenata-Variable // ****** var ressourcedata = []; originalSelect.Children (). Jede Funktion (Index (Wert, Wert) {Vorbereitungsoption ($ (value) .Text (), Wrapper; Ressourcedata.push ($ (value) .Text ()); Zeigt das aktuelle Dropdown-Feld inputSelect.focus (function () {selectlist.fadein (100) an. // v speichert den in das Eingangseingangsfeld eingegebenen Inhalt. Wenn der Inhalt des Eingangs nicht leer ist, werden die Daten mit den Zeichen in V in allen in der ursprünglichen Dropdown-Box gespeicherten Daten gefunden und in die variable newResourcedata gedrückt // ******* var v = inputSelect.val () () var newResourcedata = []; -1) newResourcedata.push (t);});} Wrapper.Children ("ol"). Leer (); $. Jeweils (newResourcedata, function (i, t) {prepeoption (t, wrapper);}); // *******}). Blur (Funktion () {) {) {) {) {) Fade.fade.fade.fade.fade.fade.fade.fade.fade.fade.fade. }). KeyUp (Funktion (e) {if (e.Which == 13) inputSelect.trigger ("Blur"); // Ereignisse, die ausgeführt werden, wenn der Eingabetaste gedrückt wird // ******* var v = inputSelect.val (); var newResourcedata = []; if (v! = ") {{$. ! = -1) newResourcedata.push (t);});} Wrapper.Children ("ol"). Leer (); $. Jeweils (newResourcedata, function (i, t) {prepeoption (t, wrapper);}); // *******}); "Keine"}); // speichern Sie diese Instanz, um ITInStancevar = inputSelect} else {// kein Selectreturn Falsch;}}); // - End/** public Methoden ** // *** Fügt dem editable select*@param {String} Value - die Optionen Value*@returns {void}*/Instancevar.adoDoMs {void}*/Instancevar.adoDoDaNs hinzu {void}*/Instancevar. Funktion (Wert) {VorbereitungOption (Wert, InstanceVar.Parent ()); };/*** Entfernt eine spezifische Option aus dem bearbeitbaren SELECT* @param {String, Nummer} Wert - Der Wert oder den Index zum Löschen* @returns {void}*/Instancevar.removeOption = Funktion (Wert) {Switch (Typof (Wert)) {Fall "Nummer": InstanceVar.Parent (). Kinder ("ol"). Kinder (": nth ("+value+")"). REMET (); BREAKT; Fall "String": InstanceVar.parent (). Kinder ("ol"). Kinder (). Jede (Funktion (index, optionValue) {if ($ (optionValue) .Text () == value) {$ (optionValue) .remove ();}); break;}}; oder "Inline-Block"}); OriginSelect.attr ({id: objid});}; // Die InstanCerTurn InstanceVar zurückgeben;};/** private Methoden ** //// Vorbereitungsfunktion besteht darin, eine neue Optionsfunktion Vorbereitungsfunktion (Wert, Verpackung) {var Selectoption = hinzuzufügen. $ ("<li>"+value+"</li>"). appendTo (Wrapper.Children ("ol")); var InputSelect = Wrapper.Children ("input"); selectoption.css ({padding: "3px", textalign: "links", crorSor: "Tintener"}). Hover () (). "#eee"});}, function () {selectoption.css ({HintergrundColor: "#fff"}); }); // Klicken Sie auf diese OptionLectOption.click (function () {inputSelect.val (selectoption.text ()); inputSelect.Tigger ("ändern");}); }} (jQuery));