JS to implement Select Component selection input filter code _javascript tips

The JS code that implements the selection input filtering of the Select component is as follows:

/** * Where the//****** section shows a feature code added to the code that does not have the input filtering function selected * * * * @description This plugin allows ' to ' make a Select box ed Itable like a-text box while keeping it's select-option features * @description No stylesheets or images are required to r  UN the plugin * * @version 0.0.1 * @author Martin Mende * @license attribution-noncommercial 3.0 unported (CC BY-NC 3.0) * @license for Comercial with Me:martin.mende (at) aristech.de * * @requires jQuery 1.9+ * * @class editables
Elect * @memberOf JQUERY.FN * * @example * * var Selectbox = $ ("select"). Editableselect ();
* Selectbox.addoption ("I am Dynamically added"); */function ($) {$.fn.editableselect = function () {var Instancevar;//This this.each refers to the traversal of the current object, where the current object refers to the current two dropdown Marquee object's one by one calendar This.each (function () {var originalselect = $ (this),//check if element is a Select if (Originalselect[0].tagname.
toUpperCase () = = "Select") {//wrap The original Select Inserts <div></div> box at the original <select> perimeter Originalselect.wrap ($ ("<dIv/> "));
var wrapper = Originalselect.parent ();
Wrapper.css ({display: "Inline-block"});  Place an input which would represent the editable Select//Add input input box to the selection menu <input alt title ... style= "width: ..."
Value= "" > var Inputselect = $ ("<input/>"). InsertBefore (Originalselect);
Get and remove the original id var objid = originalselect.attr ("id");
ORIGINALSELECT.REMOVEATTR ("id"); Add the attributes from the original select//input the various property settings of the input box inputselect.attr ({alt:originalSelect.attr ("alt"), title : Originalselect.attr ("title"), Class:originalSelect.attr ("class"), Name:originalSelect.attr ("name"), Disabled:
Originalselect.attr ("Disabled"), Tabindex:originalSelect.attr ("TabIndex"), Id:objid});
Get the editable CSS properties from the Select var rightpadding = 15; Inputselect.css ({width:originalSelect.width ()-rightpadding, Height:originalSelect.height (), fontFamily: Originalselect.css ("fontFamily"), FontSize:originalSelect.css ("FontSize"), Background:originaLSELECT.CSS ("Background"), paddingright:rightpadding});
Inputselect.val (Originalselect.val ()); Add the triangle at the right var triangle = $ ("<div/>"). CSS ({height:0, width:0, Borderleft: 5px solid Transpa Rent ", BorderRight:" 5px solid Transparent ", BorderTop:" 7px solid #999 ", Position:" Relative ", Top:-(inputselect.height ()/2) -5, Left:inputSelect.width () +rightpadding-10, marginbottom: " -7px", Pointerevents: "None"}). InsertAfter (
Inputselect);  Create the selectable list that would appear when the input gets focus//Spotlight plus <ol><ol/> dropdown box var selectlist = 
$ ("<ol/>"). CSS ({display: "None", listStyleType: "None", Width:inputSelect.outerWidth ()-2, padding:0, margin:0, border: "Solid 1px #ccc", FontFamily:inputSelect.css ("fontFamily"), FontSize:inputSelect.css ("FontSize"), background
: "#fff", Position: "Absolute", zindex:1000000}). InsertAfter (triangle);
Add Options//store all the data in the current Drop-down box in the resourcedata variable//****** var resourcedata = []; Originalselect.children (). each (function (index, value) {prepareoption ($ (value). Text (), wrapper); Resourcedata.push ($ (value). text ());}); Bind the focus handler//FadeIn (100) when the mouse is focused, that is, the Drop-down display the current Drop-down box Inputselect.focus (function () {Selectlist.fadein (
100); V stores the content entered in the input input box, and if the input is not empty, locate the data in the V character in all data stored in the original dropdown box//****** var v = inputselect.val () in the Newresourcedata variable.
;
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");//Events executed when the Enter accelerator is pressed and then//****** 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);
});
//******
});

Hide original element originalselect.css ({visibility: "hidden", Display: "None"}); Save this instance to return it Instancevar = Inputselect}else{//not "a select return false;}"); /-end each/** public methods **//** * Adds A option to the editable select * @param {String} value-the options Valu 
E * @returns {void} */instancevar.addoption = function (value) {prepareoption (value, instancevar.parent ());

}; /** * Removes a specific option from the editable select * @param {String, number} value-the value or the index to Delet E * @returns {void} */instancevar.removeoption = function (value) {switch (typeof (value)) {case "number": Instancevar.pare
NT (). Children ("ol"). Children (": Nth (" +value+ ")"). Remove (); 
Break Case ' string ': Instancevar.parent (). Children ("ol"). Children (). each (function (index, optionValue) {if ($ (optionValue)
. Text () ==value) {$ (OptionValue). Remove ();});
Break

} 
}; /** * Resets the Select to it ' s original * @returns {void} * * * Instancevar.Restoreselect = function () {var originalselect = instancevar.parent (). Children ("select"); var ObjID = Instancevar.attr ("
ID ");
Instancevar.parent (). before (Originalselect);
Instancevar.parent (). remove ();
Originalselect.css ({visibility: "visible", Display: "Inline-block"});
Originalselect.attr ({Id:objid});

};
Return to the instance return Instancevar;

}; /** Private Methods **///prepareoption function is to add a new option in the current dropdown box function prepareoption (value, wrapper) {var selectoption = $ ("
<li> "+value+" </li>). Appendto (Wrapper.children ("Ol"));
var inputselect = Wrapper.children ("input"); Selectoption.css ({padding: "3px", TextAlign: "Left", cursor: "pointer"}). Hover (function () {SELECTOPTION.CSS ({
BackgroundColor: "#eee"}); 
The function () {selectoption.css ({backgroundcolor: "#fff"});
}); Bind click on this option Selectoption.click (function () {Inputselect.val (Selectoption.text ()); Inputselect.trigger (
"Change"); 
});
 }} (JQuery);