js實現select組件的選擇輸入過濾代碼

 實現select組件的選擇輸入過濾作用的js代碼如下：

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 43 44 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 84 85 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 119 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 180 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 /**    *其中//******之間的部分顯示的是在沒有選擇輸入過濾功能的代碼上加入的功能代碼    **    / /**  * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features * @description no stylesheets or images are required to run the plugin * * @version 0.0.1 * @author Martin Mende * @license Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) * @license For comercial use please contact me: martin.mende(at)aristech.de *  * @requires jQuery 1.9+ * * @class editableSelect * @memberOf jQuery.fn * * @example * * var selectBox = $("select").editableSelect(); * selectBox.addOption("I am dynamically added"); */    (function ( $ ) {    $.fn.editableSelect = function() { var instanceVar; //此this.each()指的就是對當前對象的遍歷，這裡的當前對象指代的就是對當前兩個下拉選擇框對象的一一遍歷 this.each(function(){ var originalSelect = $(this); //check if element is a select if(originalSelect[0].tagName.toUpperCase()==="SELECT"){ //wrap the original select在原始的<select>外圍插入<div></div>框 originalSelect.wrap($("<div/>")); var wrapper = originalSelect.parent(); wrapper.css({display: "inline-block"}); //place an input which will represent the editable select //在選擇菜單上加入input輸入框<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輸入框的各種屬性設置 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 transparent", 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 will appear when the input gets focus //聚焦的時候加上<ol><ol/>下拉框 var selectList = $("