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

/***其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码**//** * @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 selectif(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 idvar 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 selectvar 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 rightvar 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 = $("<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//在resourceData变量中存储当前下拉框中的所有数据//******var resourceData = [];originalSelect.children().each(function(index, value){prepareOption($(value).text(), wrapper);resourceData.push($(value).text());});//******//bind the focus handler//在鼠标聚焦的时候fadeIn（100），即下拉显示当前下拉框inputSelect.focus(function(){selectList.fadeIn(100);//v存储的是在input输入框中输入的内容，如果输入的内容不为空，就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中//******var v = inputSelect.val();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(100); }).keyup(function(e){if(e.which==13) inputSelect.trigger("blur");//在enter快捷键按下后弹起的时候执行的事件//******var v = inputSelect.val();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 elementoriginalSelect.css({visibility: "hidden", display: "none"});//save this instance to return itinstanceVar = inputSelect}else{//not a selectreturn false;}});//-end each/** public methods **//*** Adds an option to the editable select* @param {String} value - the options value* @returns {void}*/instanceVar.addOption = function(value){prepareOption(value, instanceVar.parent()); };/*** Removes a specific option from the editable select* @param {String, Number} value - the value or the index to delete* @returns {void}*/instanceVar.removeOption = function(value){switch(typeof(value)){case "number":instanceVar.parent().children("ol").children(":nth("+value+")").remove();break; case "string":instanceVar.parent().children("ol").children().each(function(index, optionValue){if($(optionValue).text()==value){$(optionValue).remove();}});break;} };/*** Resets the select to it's original* @returns {void}*/instanceVar.restoreSelect = function(){var originalSelect = 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 instancereturn instanceVar;};/** private methods **///prepareOption函数的作用就是在当前下拉框中添加新选项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"});},function(){selectOption.css({backgroundColor: "#fff"}); });//bind click on this optionselectOption.click(function(){inputSelect.val(selectOption.text());inputSelect.trigger("change");}); }}( jQuery ));