JS Implementation Select Component Selection input filter code

Select components to achieve the selection of input filtering action JS code is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179-18 0 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209-210 211 212 213 214 215 216 217 218 219 220 221 222 223 224-225 226

/**    * Where the//****** section shows a feature code added to code that does not have the input filtering function selected    * *   //**  * @description this Plugin allows a select box editable like a text box while keeping it select-option features * @description No stylesheets or images are required to run the plugin * * @version 0.0.1 * @author Martin Mende * @license attribution-n Oncommercial 3.0 unported (CC BY-NC 3.0) * @license for comercial use, contact Me:martin.mende (at) aristech.de P * @requires jQuery 1.9+ * * @class editableselect * @memberOf JQUERY.FN * * @example * * var Selectbox = $ ("select"). Edita Bleselect (); * Selectbox.addoption ("I am Dynamically added"); */   (function ($) {   $.fn.editableselect = function () {var Instancevar;//This this.each () refers to the current object Traversal, where the current object refers to the one by one-pass This.each (function () {var originalselect = $ (this) of the current two Drop-down selection box object;//check if element is a Select if (or Iginalselect[0].tagname.touppercase () = = "Select") {//wrap the original select in Original <select> Outer inserts <div></div> box 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.h Eight ()/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//In ResourThe Cedata variable stores all the data in the current Drop-down box//****** 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 (); }). KeyUp (function (e) {if (e.which==13) Inputselect.trigger ("Blur"); Event//****** var v = inputselect.val () when the Enter shortcut key is pressed and the bounce occurs 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 Value * @returns {void} */instancevar.addoption = function (value) {prepareoption value, INSTANCEVAR.P Arent ()); };   /** * Removes a specific option from the editable select * @param {String, number} value-the value or I Ndex to delete * @returns {void} */instancevar.removeoption = function (value) {switch (typeof (value)) {case "number": Inst Ancevar.parent (). Children ("ol"). Children (": Nth (" +value+ ")"). Remove (); break;  case "string": Instancevar.parent (). Children ("Ol"). The children (). each (function (index, optionValue) {if ( Optionvalue). Text () ==value) {$ (OptionValue). Remove ();}); Break } };   /** * Resets the Select to it original * @returns {void} * * instancevar.restoreselect = function () {var ori Ginalselect = 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 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);