js实现select组件的选择输入过滤代码
实现select组件的选择输入过滤作用的js代码如下：
/**
*其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码
**
/
/**
*@descriptionThispluginallowsyoutomakeaselectboxeditablelikeatextboxwhilekeepingit'sselect-optionfeatures
*@descriptionnostylesheetsorimagesarerequiredtoruntheplugin
*
*@version0.0.1
*@authorMartinMende
*@licenseAttribution-NonCommercial3.0Unported(CCBY-NC3.0)
*@licenseForcomercialusepleasecontactme:martin.mende(at)aristech.de
*
*@requiresjQuery1.9+
*
*@classeditableSelect
*@memberOfjQuery.fn
*
*@example
*
*varselectBox=$("select").editableSelect();
*selectBox.addOption("Iamdynamicallyadded");
*/
(function($){
$.fn.editableSelect=function(){
varinstanceVar;
//此this.each()指的就是对当前对象的遍历，这里的当前对象指代的就是对当前两个下拉选择框对象的一一遍历
this.each(function(){
varoriginalSelect=$(this);
//checkifelementisaselect
if(originalSelect[0].tagName.toUpperCase()==="SELECT"){
//wraptheoriginalselect在原始的<select>外围插入<div></div>框
originalSelect.wrap($("<div/>"));
varwrapper=originalSelect.parent();
wrapper.css({display:"inline-block"});
//placeaninputwhichwillrepresenttheeditableselect
//在选择菜单上加入input输入框<inputalttitle.....style="width:......"value="">
varinputSelect=$("<input/>").insertBefore(originalSelect);
//getandremovetheoriginalid
varobjID=originalSelect.attr("id");
originalSelect.removeAttr("id");
//addtheattributesfromtheoriginalselect
//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
});
//gettheeditablecsspropertiesfromtheselect
varrightPadding=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());
//addthetriangleattheright
vartriangle=$("<div/>").css({
height:0,width:0,
borderLeft:"5pxsolidtransparent",
borderRight:"5pxsolidtransparent",
borderTop:"7pxsolid#999",
position:"relative",
top:-(inputSelect.height()/2)-5,
left:inputSelect.width()+rightPadding-10,
marginBottom:"-7px",
pointerEvents:"none"
}).insertAfter(inputSelect);
//createtheselectablelistthatwillappearwhentheinputgetsfocus
//聚焦的时候加上<ol><ol/>下拉框
varselectList=$("<ol/>").css({
display:"none",
listStyleType:"none",
width:inputSelect.outerWidth()-2,
padding:0,
margin:0,
border:"solid1px#ccc",
fontFamily:inputSelect.css("fontFamily"),
fontSize:inputSelect.css("fontSize"),
background:"#fff",
position:"absolute",
zIndex:1000000
}).insertAfter(triangle);
//addoptions
//在resourceData变量中存储当前下拉框中的所有数据
//******
varresourceData=[];
originalSelect.children().each(function(index,value){
prepareOption($(value).text(),wrapper);
resourceData.push($(value).text());
});
//******
//bindthefocushandler
//在鼠标聚焦的时候fadeIn（100），即下拉显示当前下拉框
inputSelect.focus(function(){
selectList.fadeIn(100);
//v存储的是在input输入框中输入的内容，如果输入的内容不为空，就在存储原始下拉框的所有数据中找到出现v中字符的数据压入newResourceData变量中
//******
varv=inputSelect.val();
varnewResourceData=[];
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快捷键按下后弹起的时候执行的事件
//******
varv=inputSelect.val();
varnewResourceData=[];
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);
});
//******
});
//hideoriginalelement
originalSelect.css({visibility:"hidden",display:"none"});
//savethisinstancetoreturnit
instanceVar=inputSelect
}else{
//notaselect
returnfalse;
}
});//-endeach
/**publicmethods**/
/**
*Addsanoptiontotheeditableselect
*@param{String}value-theoptionsvalue
*@returns{void}
*/
instanceVar.addOption=function(value){
prepareOption(value,instanceVar.parent());
};
/**
*Removesaspecificoptionfromtheeditableselect
*@param{String,Number}value-thevalueortheindextodelete
*@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;
}
};
/**
*Resetstheselecttoit'soriginal
*@returns{void}
*/
instanceVar.restoreSelect=function(){
varoriginalSelect=instanceVar.parent().children("select");
varobjID=instanceVar.attr("id");
instanceVar.parent().before(originalSelect);
instanceVar.parent().remove();
originalSelect.css({visibility:"visible",display:"inline-block"});
originalSelect.attr({id:objID});
};
//returntheinstance
returninstanceVar;
};
/**privatemethods**/
//prepareOption函数的作用就是在当前下拉框中添加新选项
functionprepareOption(value,wrapper){
varselectOption=$("<li>"+value+"</li>").appendTo(wrapper.children("ol"));
varinputSelect=wrapper.children("input");
selectOption.css({
padding:"3px",
textAlign:"left",
cursor:"pointer"
}).hover(
function(){
selectOption.css({backgroundColor:"#eee"});
},
function(){
selectOption.css({backgroundColor:"#fff"});
});
//bindclickonthisoption
selectOption.click(function(){
inputSelect.val(selectOption.text());
inputSelect.trigger("change");
});
}
}(jQuery));