可输入文字查找ajax下拉框控件 ComBox的实现方法

2020-05-27 18:00:48易采站长站整理

this.$type="basic";//下拉框控件的运行模式,有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
this.$selectHeight=property.selectHeight||0;
this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY对象
this.$lastSelect=null;//当前最近一次被选中的单元,在this.$type="multiple"时,它将不发挥其记录作用
this.$select = null; //保存所选值的单元一般为select控件
this.$autoLoad=false;//是否动设置为动态载入数据,既下拉动作触发时再载入数据,默认为FALSE()
this.$alreadyLoad=false;//是否已经载入完了数据,默认为false
//设置为动态自动获取数据(渲染后Combo中的input框被选中后载入数据)
this.setAutoLoad=function(bool){
this.$autoLoad=true;
};
if(property.autoLoad) this.setAutoLoad(property.autoLoad);
this.$ajaxType=null;//,其变量为一个远程链接参数的JSON数组,格式例如:{url:"website/pp.php",type:"POST",para:(与JQUERY中的AJAX方法中传参DATA一样)}默认为空
this.setAjaxType=function(json){
this.$ajaxType.url=json.url;
this.$ajaxType.type=json.type;
this.$ajaxType.para=json.para;
this.$ajaxType.dataType=json.dataType;
};
if (property.ajaxType) this.setAjaxType(property.ajaxType);

//开始构造函数主要内容
if(dom!=null && dom.tagName=="SELECT"){
var temp="";
for(var i=0;i<dom.length;i++){
this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];
temp+="<a href='#'><p "+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";
}
this.$list.append(temp);
this.$id=dom.id;
this.$name=dom.name;
if(dom.multiple) this.$type="multiple";
this.$select=$(dom);
this.$select.wrap("<div class='Combo' id='Combo_"+this.$id+"'></div>")
this.$div=this.$select.parent(".Combo");
}
else{
this.$div=$(dom);
this.$div.addClass("Combo");
this.$select=$("<select></select>");
this.$div.append(this.$select);
}
//this.$div.before(this.$septum);
this.$div.css({width:this.$width+"px"});
this.$div.append("<div class='text' style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);
this.$div.children("div:eq(0)").append("<div class='top_border'></div>").append(this.$input);

//如果DOM为一个SELECT控件,则property中的属性还可以覆盖掉原来的ID,NAME ,type="multple"的默认设置
//ID,NAME,TYPE如果在传入SELECT时就已经通过SELECT来定义,则PROPERTY中可以不用再写
if(property.id){this.$id=property.id;this.$select.attr("id",property.id);}
if(property.name){this.$name=property.name;this.$select.attr("name",property.name);}
if(property.type){
this.$type=property.type;
if(property.type=="multiple") {this.$select.attr("size",1);this.$select.attr("multiple",property.type);}