/***其中//******之間的部分顯示的是在沒有選擇輸入過濾功能的代碼上加入的功能代碼**//** * @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 ));