欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-23 09:54:59
...
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文件</pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre name="code" class="javascript">/*下拉框定义--GooCombo类*/
//dom :要被绑定的DOM对象,必须要有其ID或者NAME,且未被JQUERY对象化
//property :JSON变量,SLIDER的详细参数设置
//目前,构造函数可接受用普通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'" : "") + "/>"); //下拉框控件中始终显示的文本框INPUT
    this.$btn=$("<div class='btn_up'></div>");//下拉框右部的按钮
    this.$data=[];//下拉框控件的所有显示文字和值,二维数组
    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);}
        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 += "<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中阻止函数器默认动作的方式
      var inthis = 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);
        }
 
      }
      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框中的内容被改变时的事件
    if(!this.$readOnly){
        if(this.$type=="filter"){//当type=="filter"时
          this.$input.bind("change", { inthis: this }, 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属性有设置,则filter模式下,下拉框控件将在每次change时,动态从获取数据
              inthis.$ajaxType.para["search"] = text; //后台需要对REQUEST传入的search变量有一个向前模糊匹配的查询功能
              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", { inthis: this }, 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中阻止函数器默认动作的方式
        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",{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.removeClass("focus");
    });
    //绑定当用户用上/下方向键选择列表内容时的事件
    this.$list.bind("keydown",{inthis:this},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下拉菜单控件一样操作,当FORM提交时,后台可request获取一个被选取值的数组
    this.getValue=function(){
        return this.$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("<a href='#'><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("<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);
 }
}); </pre><br>
HTML页面:(要先引入jquery 库)<br>
       $(document).ready(function () {<br>
              <br>
           //创建控件开始<br>
            var property =<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>
             var combo = $.createGooCombo(document.getElementById("combo"), property);<br>
             combo.loadListData(datas);<br>
             //创建控件结束<br>
})<br>
<br>
<span style="color:#FF0000">datas是由ashx一般处理文件生成二维数组的json字符串 var datas=["+jsonString+"]</span><br>
<pre name="code" class="vb"> </pre><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() + "," + dt.Rows[i]["EmployeeNameID"].ToString() + "],");
        }
      }
    }
       
     return   sb.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