可输入文字查找ajax下拉框控件 ComBox的实现方法
GooFunc.js文件
//获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到
functiongetElCoordinate(dom){
vart=dom.offsetTop;
varl=dom.offsetLeft;
dom=dom.offsetParent;
while(dom){
t+=dom.offsetTop;
l+=dom.offsetLeft;
dom=dom.offsetParent;
};return{
top:t,
left:l
};
}
//兼容各种浏览器的,获取鼠标真实位置
functionmousePosition(ev){
if(!ev)ev=window.event;
if(ev.pageX||ev.pageY){
return{x:ev.pageX,y:ev.pageY};
}
return{
x:ev.clientX+document.documentElement.scrollLeft-document.body.clientLeft,
y:ev.clientY+document.documentElement.scrollTop-document.body.clientTop
};
}
//给DATE类添加一个格式化输出字串的方法
Date.prototype.format=function(format)
{
varo={
"M+":this.getMonth()+1,//month
"d+":this.getDate(),//day
"h+":this.getHours(),//hour
"m+":this.getMinutes(),//minute
"s+":this.getSeconds(),//second‘
//quarter
"q+":Math.floor((this.getMonth()+3)/3),
"S":this.getMilliseconds()//millisecond
}
if(/(y+)/.test(format))format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4-RegExp.$1.length));
for(varkino)if(newRegExp("("+k+")").test(format))
format=format.replace(RegExp.$1,
RegExp.$1.length==1?o[k]:
("00"+o[k]).substr((""+o[k]).length));
returnformat;
}
<prename="code"class="javascript"><prename="code"class="javascript"><prename="code"class="javascript"><prename="code"class="javascript">GooCombo.JS文件</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<prename="code"class="javascript">/*下拉框定义--GooCombo类*/
//dom:要被绑定的DOM对象，必须要有其ID或者NAME，且未被JQUERY对象化
//property:JSON变量，SLIDER的详细参数设置
//目前，构造函数可接受用普通DOM容器或者直接传送SELECT控件来进行渲染
functionGooCombo(dom,property){
this.$div=null;//渲染完毕后最父框架的DIV
this.$id=null;//this.$div中SELECT控件的ID
this.$name=null;//this.$div中SELECT控件的NAME
this.$width=property.width;//下拉框控件的宽度，必填项
this.$haveIcon=property.haveIcon||false;
this.$input=$("<inputtype='text'value='"+property.text+"'"+(property.readOnly?"readonly='readonly'":"")+(this.$haveIcon?"style='margin-left:20px;width:"+(this.$width-39)+"px'":"")+"/>");//下拉框控件中始终显示的文本框INPUT
this.$btn=$("<divclass='btn_up'></div>");//下拉框右部的按钮
this.$data=[];//下拉框控件的所有显示文字和值,二维数组
this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示三种,默认为basic
this.$selectHeight=property.selectHeight||0;
this.$list=$("<ulstyle='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"){
vartemp="";
for(vari=0;i<dom.length;i++){
this.$data[i]=[(dom.options[i].value||dom.options[i].text),dom.options[i].text,""];
temp+="<ahref='#'><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("<divclass='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("<divclass='text'style='width:"+(this.$width-19)+"px;'></div>").append(this.$btn).append(this.$list);
this.$div.children("div:eq(0)").append("<divclass='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);}
else this.$select.removeAttr("multiple");
}
//载入一组数据的方法
this.loadListData=function(data){
this.$data=[];
if(this.$list.children("a").length>0){
this.$list.empty();
this.$select.empty();
}
temp="",temp2="";
for(i=0;i<data.length;++i){
this.$data[i]=[data[i][0],data[i][1],data[i][2]||""];
if(this.$type=="filter")//在这里可以修改你想类型basic当鼠标点击进去是否展现初始数据
temp+="<ahref='#'><p"+(this.$haveIcon?"style='text-indent:19px;background:"+this.$data[i][2]+"'":"")+"value='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</p></a>";
temp2+="<optionvalue='"+this.$data[i][0]+"'>"+this.$data[i][1]+"</option>";
}
if(this.$type=="filter")
this.$list.append(temp);
this.$select.append(temp2);
this.$alreadyLoad=true;
};
if(property.data) this.loadListData(property.data);
//动态远程载入数据，AJAX请求的参数将读取this.$ajaxType中的设置
this.loadListDataAjax=function(){
varinthis=this;
$.ajax({
type:this.$ajaxType.type,
url:this.$ajaxType.url,
dataType:this.$ajaxType.dataType,
data:this.$ajaxType.para,
success:function(data){
inthis.loadListData(data);
}});
};
//提示文字
$("input[type='text']").each(function(){
if($(this).val()==property.text){
$(this).bind("focus",function(){
$(this).val("");
}).blur(function(){
$(this).val(property.text)
});
}
});
//绑定当INPUT框被选中时的事件
this.$input.bind("focus",{inthis:this},//如果this.$autoLoad或!this.$alreadyLoad有一个为FALSE，则ajaxType将无效，可不传
function(e){
if(e&&e.preventDefault)e.preventDefault();//阻止默认浏览器动作(W3C)
elsewindow.event.returnValue=false;//IE中阻止函数器默认动作的方式
varinthis=e.data.inthis;
// inthis.$autoLoad=true;
//
//
// inthis.$alreadyLoad=false;
// inthis.$ajaxType=false;
if(!inthis.$alreadyLoad&&inthis.$autoLoad){
if(inthis.$ajaxType){//如果是远程AJAX获取数据
inthis.loadListDataAjax();
}
else
{
inthis.loadListData(inthis.$data);
}
}
varlist=inthis.$list;
varheight=inthis.$selectHeight;
varwidth=inthis.$width;
list.css("display","block");
$(document).bind("mouseup",function(e){
varlocate=getElCoordinate(list.get(0));
varev=mousePosition(e);
if(locate.left+width<ev.x||locate.left>ev.x||locate.top-22>ev.y||locate.top+height+2<ev.y){
list.css("display","none");
}
this.onmouseup=null;
returnfalse;
});
returnfalse;
});
//绑定当INPUT框中的内容被改变时的事件
if(!this.$readOnly){
if(this.$type=="filter"){//当type=="filter"时
this.$input.bind("change",{inthis:this},function(e){
varinthis=e.data.inthis;
//vartext=""+this.value;
vartext=$.trim(this.value)
vardata=inthis.$data;
vartemp="";
if(inthis.$ajaxType){//如果ajaxType属性有设置，则filter模式下，下拉框控件将在每次change时，动态从获取数据
inthis.$ajaxType.para["search"]=text;//后台需要对REQUEST传入的search变量有一个向前模糊匹配的查询功能
inthis.loadListDataAjax();
}
else{
for(vari=0;i<data.length;++i)
{
if(data[i][1].indexOf(text)==0)
temp+="<ahref='#'><p"+(inthis.$haveIcon?"style='text-indent:19px;background:"+data[i][2]+"'":"")+"value='"+data[i][0]+"'>"+data[i][1]+"</p></a>";
}
inthis.$list.empty();
inthis.$list.append(temp);
}
});
}
else{
this.$input.bind("change",{inthis:this},function(e){
vartext=this.value;
varinthis=e.data.inthis;
vardata=e.data.inthis.$data;
for(vari=0;i<data.length;++i){
if(data[i][1]==text){
if(inthis.$lastSelect)
inthis.$lastSelect.removeClass("active");
inthis.$lastSelect=inthis.$list.children("a:eq("+i+")").addClass("active");
now=inthis.$list.children("a:eq("+i+")").children("p");
inthis.$select.val(data[i][0]);
if(inthis.$haveIcon){
$(this).parent(".text").css({
background:now.css("background"),
"background-image":"url(../images/combo_icon.gif)",
"background-position":now.css("background-position"),
"background-repeat":now.css("background-repeat")
});
}
break;
}
}
});
}
varonce=null;
this.$input.bind("keyup",{input:this.$input,list:this.$list},function(e){
if(!e)e=window.event;
if(e.keyCode==13)
e.data.list.css("display","none");
elseif(e.keyCode==40){
vartemp=e.data.list.children("a:eq(0)");
temp.focus();
temp.toggleClass("focus");
}
else{
//alert("进入keyup");
once=null;
once=setTimeout(function(){e.data.input.change();},500);
}
});
}
//绑定下拉按钮的事件
this.$btn.bind("mousedown",function(){
inthis=$(this);
inthis.removeClass("btn_up");
inthis.addClass("btn_down");
});
this.$btn.bind("mouseup",{input:this.$input},function(e){
inthis=$(this);
inthis.removeClass("btn_down");
inthis.addClass("btn_up");
e.data.input.focus();
});
//选中下拉框中一个指定索引的值（如果是multiple模式，且这个值原来已经被选定，则运行此函数后将会取消该选定）
this.selectValue=function(index){
if(index>0&&index<this.$data.length){
varp=this.$list.children("a:eq("+index+")");
if(this.$lastSelect) this.$lastSelect.removeClass("active");
this.$lastSelect=p;
p.click();
}
};
//绑定下拉列表单元被点击时的事件
this.$list.bind("click",{inthis:this},function(e){
if(e&&e.preventDefault) e.preventDefault();//阻止默认浏览器动作(W3C)
else window.event.returnValue=false;//IE中阻止函数器默认动作的方式
if(!e)e=window.event;
varclicked=$(e.target);
varinthis=e.data.inthis;
if(clicked.attr("tagName")=="A") clicked=clicked.children("p");
elseif(clicked.attr("tagName")=="UL"){
this.style.display="none";
return;
}
if(inthis.$haveIcon){
inthis.$input.parent(".text").css({
background:clicked.css("background"),
"background-image":"url(../images/combo_icon.gif)",
"background-position":clicked.css("background-position"),
"background-repeat":clicked.css("background-repeat")
});
}
if(inthis.$type!="multiple"){
if(inthis.$lastSelect) inthis.$lastSelect.removeClass("active");
inthis.$lastSelect=clicked.parent("a").addClass("active");
this.style.display="none";
inthis.$select.val(clicked.attr("value"));
inthis.$input.val(clicked.text());
}
else{
clicked.parent("a").toggleClass("active");
varoptionList=inthis.$select.get(0).options;
for(vari=0;i<optionList.length;++i){
if(optionList[i].value==clicked.attr("value")){
optionList[i].selected=!optionList[i].selected;
break;
}
}
inthis.$input.val(clicked.text()+",……");
}
inthis.$select.change();
//alert(inthis.$select.val());
returnfalse;
});
//绑定当用户用鼠标上/下滑过选择列表内容时的事件
this.$list.bind("mouseover",{list:this.$list},function(e){
if(!e)e=window.event;
varclicked=$(e.target);
if(clicked.attr("tagName")=="P") clicked=clicked.parent("a");
elseif(clicked.attr("tagName")=="UL"){
return;
}
clicked.focus();
clicked.addClass("focus");
});
this.$list.bind("mouseout",{list:this.$list},function(e){
if(!e)e=window.event;
varclicked=$(e.target);
if(clicked.attr("tagName")=="P") clicked=clicked.parent("a");
elseif(clicked.attr("tagName")=="UL") return;
clicked.removeClass("focus");
});
//绑定当用户用上/下方向键选择列表内容时的事件
this.$list.bind("keydown",{inthis:this},function(e){
if(!e)e=window.event;
varinthis=e.data.inthis;
if(e.keyCode==13){//回车
if(e&&e.preventDefault) e.preventDefault();//阻止默认浏览器动作(W3C)
else window.event.returnValue=false;//IE中阻止函数器默认动作的方式
varclicked=$(e.target);
if(clicked.attr("tagName")=="P") clicked=clicked.parent("a");
elseif(clicked.attr("tagName")=="UL") return;
clicked.focus();
clicked.click();
returnfalse;
}
elseif(e.keyCode==40){
varclicked=$(e.target);
if(clicked.attr("tagName")=="P") clicked=clicked.parent("a");
elseif(clicked.attr("tagName")=="UL") return;
varnow=$(e.target);
varnext=$(e.target).next("a:eq(0)");
if(next.length>0){
now.removeClass("focus");
next.addClass("focus");
next.focus();
}
}
elseif(e.keyCode==38){
varclicked=$(e.target);
if(clicked.attr("tagName")=="P") clicked=clicked.parent("a");
elseif(clicked.attr("tagName")=="UL") return;
varnow=$(e.target);
varprev=$(e.target).prev("a");
if(prev.length>0){
now.removeClass("focus");
prev.addClass("focus");
prev.focus();
}
}
});
//返回下拉框的被选值//如果是多选，则会返回一串值构成的字符串，以逗号隔开
//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉菜单控件一样操作，当FORM提交时，后台可request获取一个被选取值的数组
this.getValue=function(){
returnthis.$select.val();
};
//绑定当控件中隐藏的SELECT的值变化以后,触发的方法,通过对其设置，可达到drop-on-drop的多个下拉框相互联动功能,参数Fn为要触发执行的函数
this.bindValueChange=function(Fn){
this.$select.bind("change",Fn);
};
//删除一个选择项,index为定位参数，从0开始（即第一行的选择项）
this.delItem=function(index){
if(index>-1&&index<this.$data.length){
this.$data.splice(index,1);
this.$select.get(0).options.remove(index);
this.$list.children("a:eq("+index+")").remove();
}
};
//增加一个选择项，项,index为定位参数，从0开始（即第一行的选择项）
this.addItem=function(index,Item){
if(index=this.$data.length){//如果是加在最末尾
this.$data[index]=Item;
this.$list.append("<ahref='#'><p"+(this.$haveIcon?"style='text-indent:19px;background:"+Item[2]+"'":"")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
}
else{
this.$data.splice(index,0,Item);
this.$list.children("a:eq("+index+")").before("<ahref='#'><p"+(this.$haveIcon?"style='text-indent:19px;background:"+Item[2]+"'":"")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
}
this.$select.get(0).options.add(newOption(Item[1],Item[0]));
};
//清除所有选项
this.clearItems=function(){
this.$data=null;
this.$data=[];
this.$list.empty();
this.$select.get(0).options.length=0;
this.$select.empty();
this.$alreadyLoad=false;
};
}
//将此类的构造函数加入至JQUERY对象中
jQuery.extend({
createGooCombo:function(dom,property){
returnnewGooCombo(dom,property);
}
});</pre><br>
HTML页面:(要先引入jquery库)<br>
$(document).ready(function(){<br>
<br>
//创建控件开始<br>
varproperty=<br>
{<br>
id:"demo",<br>
name:"demo",<br>
type:"filter",<br>
readOnly:false,<br>
width:160,<br>
selectHeight:140,<br>
autoLoad:true,<br>
haveIcon:false,<br>
text:"可输入员工姓名查找"<br>
}<br>
varcombo=$.createGooCombo(document.getElementById("combo"),property);<br>
combo.loadListData(datas);<br>
//创建控件结束<br>
})<br>
<br>
<spanstyle="color:#FF0000">datas是由ashx一般处理文件生成二维数组的json字符串vardatas=["+jsonString+"]</span><br>
<prename="code"class="vb"></pre><prename="code"class="csharp">publicstringCreateJsonParameters(DataTabledt)
{
System.Text.StringBuildersb=newSystem.Text.StringBuilder();
if(dt!=null)
{
for(inti=0;i<dt.Rows.Count-1;i++)
{
if(i<dt.Rows.Count-1)
{
sb.Append("["+dt.Rows[i]["EmployeeID"].ToString()+","+dt.Rows[i]["EmployeeNameID"].ToString()+"],");
}
elseif(i==dt.Rows.Count-1)
{
sb.Append("["+dt.Rows[i]["EmployeeID"].ToString()+","+dt.Rows[i]["EmployeeNameID"].ToString()+"],");
}
}
}
returnsb.ToString().TrimEnd(",".ToCharArray());
}</pre><br>
<br>
<br>
<br>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre></pre></pre>
以上就是小编为大家带来的可输入文字查找ajax下拉框控件ComBox的实现方法全部内容了，希望大家多多支持毛票票~