js实现select组件的选择输入过滤代码

如何实现select组件的选择输入过滤作用，下面有一段js代码，很实用，需要的朋友可以看看

实现select组件的选择输入过滤作用的js代码如下：

1. /** 
2.  
3. *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 
4.  
5. ** 
6.  
7. / 
8. /**  
9. * @description This plugin allows you to make a select box editable like a text box while keeping it's select-option features 
10. * @description no stylesheets or images are required to run the plugin 
11. * 
12. * @version 0.0.1 
13. * @author Martin Mende 
14. * @license Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) 
15. * @license For comercial use please contact me: martin.mende(at)aristech.de 
16. *  
17. * @requires jQuery 1.9+ 
18. * 
19. * @class editableSelect 
20. * @memberOf jQuery.fn 
21. * 
22. * @example 
23. * 
24. * var selectBox = $("select").editableSelect(); 
25. * selectBox.addOption("I am dynamically added"); 
26. */ 
27.  
28. (function ( $ ) { 
29.  
30. $.fn.editableSelect = function() { 
31. var instanceVar; 
32. //此this.each()指的就是对当前对象的遍历，这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历 
33. this.each(function(){ 
34. var originalSelect = $(this); 
35. //check if element is a select 
36. if(originalSelect[0].tagName.toUpperCase()==="SELECT"){ 
37. //wrap the original select在原始的<select>外围插入<div></div>框 
38. originalSelect.wrap($("<div/>")); 
39. var wrapper = originalSelect.parent(); 
40. wrapper.css({display: "inline-block"}); 
41. //place an input which will represent the editable select 
42. //在选择菜单上加入input输入框<input alt title ..... style="width:......" value=""> 
43. var inputSelect = $("<input/>").insertBefore(originalSelect); 
44. //get and remove the original id 
45. var objID = originalSelect.attr("id"); 
46. originalSelect.removeAttr("id"); 
47. //add the attributes from the original select 
48. //input输入框的各种属性设置 
49. inputSelect.attr({ 
50. alt: originalSelect.attr("alt"), 
51. title: originalSelect.attr("title"), 
52. class: originalSelect.attr("class"), 
53. name: originalSelect.attr("name"), 
54. disabled: originalSelect.attr("disabled"), 
55. tabindex: originalSelect.attr("tabindex"), 
56. id: objID 
57. }); 
58. //get the editable css properties from the select 
59. var rightPadding = 15; 
60. inputSelect.css({ 
61. width: originalSelect.width()-rightPadding, 
62. height: originalSelect.height(), 
63. fontFamily: originalSelect.css("fontFamily"), 
64. fontSize: originalSelect.css("fontSize"), 
65. background: originalSelect.css("background"), 
66. paddingRight: rightPadding 
67. }); 
68. inputSelect.val(originalSelect.val()); 
69. //add the triangle at the right 
70. var triangle = $("<div/>").css({ 
71. height: 0, width: 0, 
72. borderLeft: "5px solid transparent", 
73. borderRight: "5px solid transparent",  
74. borderTop: "7px solid #999", 
75. position: "relative", 
76. top: -(inputSelect.height()/2)-5, 
77. left: inputSelect.width()+rightPadding-10, 
78. marginBottom: "-7px", 
79. pointerEvents: "none" 
80. }).insertAfter(inputSelect); 
81. //create the selectable list that will appear when the input gets focus 
82. //聚焦的时候加上<ol><ol/>下拉框 
83. var selectList = $("<ol/>").css({ 
84. display: "none", 
85. listStyleType: "none", 
86. width: inputSelect.outerWidth()-2, 
87. padding: 0, 
88. margin: 0, 
89. border: "solid 1px #ccc", 
90. fontFamily: inputSelect.css("fontFamily"), 
91. fontSize: inputSelect.css("fontSize"), 
92. background: "#fff", 
93. position: "absolute", 
94. zIndex: 1000000 
95. }).insertAfter(triangle); 
96. //add options 
97. //在resourceData变量中存储当前下拉框中的所有数据 
98. //****** 
99. var resourceData = []; 
100. originalSelect.children().each(function(index, value){ 
101. prepareOption($(value).text(), wrapper); 
102. resourceData.push($(value).text()); 
103. }); 
104. //****** 
105. //bind the focus handler 
106. //在鼠标聚焦的时候fadeIn（100），即下拉显示当前下拉框 
107. inputSelect.focus(function(){ 
108. selectList.fadeIn(100); 
109. //v存储的是在input输入框中输入的内容，如果输入的内容不为空，就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中 
110. //****** 
111. var v = inputSelect.val(); 
112. var newResourceData = []; 
113. if(v != "") { 
114. $.each(resourceData, function(i, t){ 
115. if(t.indexOf(v) != -1) 
116. newResourceData.push(t); 
117. }); 
118. } 
119. wrapper.children("ol").empty(); 
120. $.each(newResourceData, function(i, t){ 
121. prepareOption(t, wrapper); 
122. }); 
123. //****** 
124. }).blur(function(){ 
125. selectList.fadeOut(100);  
126. }).keyup(function(e){ 
127. if(e.which==13) inputSelect.trigger("blur"); 
128. //在enter快捷键按下后弹起的时候执行的事件 
129. //****** 
130. var v = inputSelect.val(); 
131. var newResourceData = []; 
132. if(v != "") { 
133. $.each(resourceData, function(i, t){ 
134. if(t.indexOf(v) != -1) 
135. newResourceData.push(t); 
136. }); 
137. } 
138. wrapper.children("ol").empty(); 
139. $.each(newResourceData, function(i, t){ 
140. prepareOption(t, wrapper); 
141. }); 
142. //****** 
143. }); 
144. //hide original element 
145. originalSelect.css({visibility: "hidden", display: "none"}); 
146.  
147. //save this instance to return it 
148. instanceVar = inputSelect 
149. }else{ 
150. //not a select 
151. return false; 
152. } 
153. });//-end each 
154.  
155. /** public methods **/ 
156.  
157. /** 
158. * Adds an option to the editable select 
159. * @param {String} value - the options value 
160. * @returns {void} 
161. */ 
162. instanceVar.addOption = function(value){ 
163. prepareOption(value, instanceVar.parent());  
164. }; 
165.  
166. /** 
167. * Removes a specific option from the editable select 
168. * @param {String, Number} value - the value or the index to delete 
169. * @returns {void} 
170. */ 
171. instanceVar.removeOption = function(value){ 
172. switch(typeof(value)){ 
173. case "number": 
174. instanceVar.parent().children("ol").children(":nth("+value+")").remove(); 
175. break;  
176. case "string": 
177. instanceVar.parent().children("ol").children().each(function(index, optionValue){ 
178. if($(optionValue).text()==value){ 
179. $(optionValue).remove(); 
180. } 
181. }); 
182. break; 
183. }  
184. }; 
185.  
186. /** 
187. * Resets the select to it's original 
188. * @returns {void} 
189. */ 
190. instanceVar.restoreSelect = function(){ 
191. var originalSelect = instanceVar.parent().children("select"); 
192. var objID = instanceVar.attr("id"); 
193. instanceVar.parent().before(originalSelect); 
194. instanceVar.parent().remove(); 
195. originalSelect.css({visibility: "visible", display: "inline-block"}); 
196. originalSelect.attr({id: objID}); 
197. }; 
198.  
199. //return the instance 
200. return instanceVar; 
201. }; 
202.  
203. /** private methods **/ 
204. //prepareOption函数的作用就是在当前下拉框中添加新选项 
205. function prepareOption(value, wrapper){ 
206. var selectOption = $("<li>"+value+"</li>").appendTo(wrapper.children("ol")); 
207. var inputSelect = wrapper.children("input"); 
208. selectOption.css({ 
209. padding: "3px", 
210. textAlign: "left", 
211. cursor: "pointer" 
212. }).hover( 
213. function(){ 
214. selectOption.css({backgroundColor: "#eee"}); 
215. }, 
216. function(){ 
217. selectOption.css({backgroundColor: "#fff"});  
218. }); 
219. //bind click on this option 
220. selectOption.click(function(){ 
221. inputSelect.val(selectOption.text()); 
222. inputSelect.trigger("change"); 
223. });  
224. } 
225.  
226. }( jQuery ));