如何實(shí)現(xiàn)select組件的選擇輸入過濾作用，下面有一段js代碼，很實(shí)用，需要的朋友可以看看

實(shí)現(xiàn)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()指的就是對當(dāng)前對象的遍歷，這里的當(dāng)前對象指代的就是對當(dāng)前兩個(gè)下拉選擇框?qū)ο蟮囊灰槐闅v 
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輸入框的各種屬性設(shè)置 
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. //聚焦的時(shí)候加上<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變量中存儲(chǔ)當(dāng)前下拉框中的所有數(shù)據(jù) 
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. //在鼠標(biāo)聚焦的時(shí)候fadeIn（100），即下拉顯示當(dāng)前下拉框 
107. inputSelect.focus(function(){ 
108. selectList.fadeIn(100); 
109. //v存儲(chǔ)的是在input輸入框中輸入的內(nèi)容，如果輸入的內(nèi)容不為空，就在存儲(chǔ)原始下拉框的所有數(shù)據(jù)中找到出現(xiàn)v中字符的數(shù)據(jù)壓入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快捷鍵按下后彈起的時(shí)候執(zhí)行的事件 
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函數(shù)的作用就是在當(dāng)前下拉框中添加新選項(xiàng) 
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 ));