实现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 = $("