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

GooFunc.js文件

获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { t += dom.offsetTop; l += dom.offsetLeft; dom=dom.offsetParent; }; return { top: t,left: l }; } //兼容各种浏览器的,获取鼠标真实位置 function mousePosition(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) { var o = { "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(var k in o)if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); return format; }

<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">GooCombo.JS文件

函数可接受用普通DOM容器或者直接传送SELECT控件来进行渲染
function GooCombo(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 = $("<input type='text' value='" + property.text + "' " + (property.readOnly ? "readonly='readonly'" : "") + (this.$haveIcon ? " style='margin-left:20px;width:" + (this.$width - 39) + "px'" : "") + "/&gt;"); //下拉框控件中始终<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>的文本框INPUT
this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按钮
this.$data=[];//下拉框控件的所有<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="/tag/wenzi/" target="_blank" class="keywords">文字</a>和值,二维数组
this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a> 三种,默认为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
//设置为动态<a href="/tag/zidong/" target="_blank" class="keywords">自动</a><a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>数据(渲染后Combo中的input框被选中后载入数据)
this.setAutoLoad=function(bool){
    this.$autoLoad=true;
};
if(property.autoLoad) this.setAutoLoad(property.autoLoad);
this.$ajaxType=null;//，其变量为一个远程<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>参数的JSON数组，格式例如：{url:"website/pp.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>",type:"POST",para:(与JQUERY中的AJAX<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>中传参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);
//开始构造<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>主要<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>
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中的<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>还可以覆盖掉原来的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");
}
//载入一组数据的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>
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")//在这里可以<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a>你想类型 basic 当鼠标点击进去是否展现初始数据
      temp += "<a href='#'><p " + (this.$haveIcon ? "style='text-indent:19px;background:" + this.$data[i][2] + "' " : "") + "value='" + this.$data[i][0] + "'>" + this.$data[i][1] + "</p></a>";
    temp2 += "<option value='" + 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(){
    var inthis=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)
  else window.event.returnValue = false; //IE中阻止<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>器默认动作的方式
  var inthis = e.data.inthis;
//    inthis.$autoLoad = true;

//

//

//    inthis.$alreadyLoad = false;

//    inthis.$ajaxType = false;

if (!inthis.$alreadyLoad && inthis.$autoLoad) {
    if (inthis.$ajaxType) {//如果是远程AJAX<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>数据

      inthis.loadListDataAjax();
    }
    else 
  {
      inthis.loadListData(inthis.$data);
    }

  }
  var list = inthis.$list;

  var height = inthis.$selectHeight;
  var width = inthis.$width;
  list.css("display","block");
  $(document).bind("mouseup",function (e) {
    var locate = getElCoordinate(list.get(0));
    var ev = 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;
    return false;
  });
  return false;
});
//绑定当INPUT框中的<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>被改变时的事件
if(!this.$readOnly){
    if(this.$type=="filter"){//当type=="filter"时
      this.$input.bind("change",function (e) {
        var inthis = e.data.inthis;
        //var text=""+this.value;
        var text = $.trim(this.value)

        var data = inthis.$data;
        var temp = "";

        if (inthis.$ajaxType) {//如果ajaxType<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>有设置，则filter模式下，下拉框控件将在每次change时，动态从<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>数据
          inthis.$ajaxType.para["search"] = text; //<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>需要对REQUEST传入的search变量有一个向前模糊匹配的<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a><a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>
          inthis.loadListDataAjax();
        }
        else {
          for (var i = 0; i < data.length; ++i)
      {
            if (data[i][1].indexOf(text) == 0)
            temp +="<a href='#'><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",function (e) {
        var text = this.value;
        var inthis = e.data.inthis;
        var data = e.data.inthis.$data;

        for (var i = 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;
          }
        }
      });
    }
    var once=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");
      else if (e.keyCode == 40) {
        var temp = 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){
        var p=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中阻止<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>器默认动作的方式
    if(!e) e=window.event;
    var clicked=$(e.target);
    var inthis=e.data.inthis;
    if(clicked.attr("tagName")=="A")    clicked=clicked.children("p");
    else if(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");
        var optionList=inthis.$select.get(0).options;
        for(var i=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());
    return false;
});
//绑定当用户用鼠标上/下滑过选择列表内容时的事件
this.$list.bind("mouseover",{list:this.$list},function(e){
    if(!e) e=window.event;
    var clicked=$(e.target);
    if(clicked.attr("tagName")=="P")    clicked=clicked.parent("a");
    else if(clicked.attr("tagName")=="UL"){
        return;
    }
    clicked.focus();
    clicked.addClass("focus");
});
this.$list.bind("mouseout",function(e){
    if(!e) e=window.event;
    var clicked=$(e.target);
    if(clicked.attr("tagName")=="P")    clicked=clicked.parent("a");
    else if(clicked.attr("tagName")=="UL")  return;
    clicked.removeClass("focus");
});
//绑定当用户用上/下方向键选择列表内容时的事件
this.$list.bind("keydown",function(e){
    if(!e) e=window.event;
    var inthis=e.data.inthis;
    if(e.keyCode==13){//回车
        if ( e && e.preventDefault )    e.preventDefault();//阻止默认浏览器动作(W3C)
        else    window.event.returnValue = false;//IE中阻止函数器默认动作的方式
        var clicked=$(e.target);
        if(clicked.attr("tagName")=="P")    clicked=clicked.parent("a");
        else if(clicked.attr("tagName")=="UL")  return;
        clicked.focus();
        clicked.click();
        return false;
    }
    else if(e.keyCode==40){
        var clicked=$(e.target);
        if(clicked.attr("tagName")=="P")    clicked=clicked.parent("a");
        else if(clicked.attr("tagName")=="UL")  return;
        var now=$(e.target);
        var next=$(e.target).next("a:eq(0)");
        if(next.length>0){
            now.removeClass("focus");
            next.addClass("focus");
            next.focus();
        }
    }
    else if(e.keyCode==38){
        var clicked=$(e.target);
        if(clicked.attr("tagName")=="P")    clicked=clicked.parent("a");
        else if(clicked.attr("tagName")=="UL")  return;
        var now=$(e.target);
        var prev=$(e.target).prev("a");
        if(prev.length>0){
            now.removeClass("focus");
            prev.addClass("focus");
            prev.focus();
        }
    }
});
//返回下拉框的被选值//如果是多选，则会返回一串值构成的字符串，以逗号隔开
//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>控件一样操作，当FORM提交时，<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>可request<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>一个被选取值的数组
this.getValue=function(){
    return this.$select.val();
};

//绑定当控件中隐藏的SELECT的值变化以后,触发的<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>,通过对其设置，可达到drop-on-drop的多个下拉框相互联动<a href="/tag/gongneng/" target="_blank" class="keywords">功能</a>,参数Fn为要触发执行的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
this.bindValueChange=function(Fn){
  this.$select.bind("change",Fn);

};
//<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>一个选择项,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();
    }
};
//<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>一个选择项，项,index为定位参数，从0开始（即第一行的选择项）
this.addItem=function(index,Item){
    if(index=this.$data.length){//如果是加在最末尾
        this.$data[index]=Item;
        this.$list.append("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
    }
    else{
        this.$data.splice(index,Item);
        this.$list.children("a:eq("+index+")").before("<a href='#'><p "+(this.$haveIcon? "style='text-indent:19px;background:"+Item[2]+"' " : "")+"value='"+Item[0]+"'>"+Item[1]+"</p></a>");
    }
    this.$select.get(0).options.add(new Option(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) {

return new GooCombo(dom,property);

}

});

HTML页面:(要先引入jquery 库)

$(document).ready(function () {

//创建控件开始

var property =

{

id: "demo",

name: "demo",

type: "filter",

readOnly: false,

width: 160,

selectHeight: 140,

autoLoad: true,

haveIcon: false,

text: "可输入员工姓名查找"

}

var combo = $.createGooCombo(document.getElementById("combo"),property);

combo.loadListData(datas);

//创建控件结束

})

<span style="color:#FF0000">datas是由ashx一般处理文件生成二维数组的json字符串 var datas=["+jsonString+"]

<pre name="code" class="vb"> <pre name="code" class="csharp"> public string CreateJsonParameters(DataTable dt)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();

if (dt != null)
{
  for (int i = 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() + "],");

    }
    else if (i == dt.Rows.Count - 1)
    {
      sb.Append("[" + dt.Rows[i]["EmployeeID"].ToString() + ",");
    }
  }
}

 return   sb.ToString().TrimEnd(",".<a href="/tag/toch/" target="_blank" class="keywords">toch</a>arArray());

}

以上就是小编为大家带来的可输入文字查找ajax下拉框控件 ComBox的实现方法全部内容了，希望大家多多支持编程之家~

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

GooFunc.js文件

猜你在找的Ajax相关文章