masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 可输入文字查找ajax下拉框控件 ComBox的实现方法

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

高洛峰
Lepaskan： 2016-12-09 10:27:53
asal
1460 orang telah melayarinya

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文件






/*下拉框定义--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=&#39;text&#39; value=&#39;" + property.text + "&#39; " + (property.readOnly ? "readonly=&#39;readonly&#39;" : "") + (this.$haveIcon ? " style=&#39;margin-left:20px;width:" + (this.$width - 39) + "px&#39;" : "") + "/>"); //下拉框控件中始终显示的文本框INPUT
    this.$btn=$("<div class=&#39;btn_up&#39;></div>");//下拉框右部的按钮
    this.$data=[];//下拉框控件的所有显示文字和值,二维数组
    this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
    this.$selectHeight=property.selectHeight||0;
    this.$list=$("<ul style=&#39;width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;&#39;></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=&#39;#&#39;><p "+"value=&#39;"+this.$data[i][0]+"&#39;>"+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=&#39;Combo&#39; id=&#39;Combo_"+this.$id+"&#39;></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=&#39;text&#39; style=&#39;width:"+(this.$width-19)+"px;&#39;></div>").append(this.$btn).append(this.$list);
    this.$div.children("div:eq(0)").append("<div class=&#39;top_border&#39;></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=&#39;#&#39;><p " + (this.$haveIcon ? "style=&#39;text-indent:19px;background:" + this.$data[i][2] + "&#39; " : "") + "value=&#39;" + this.$data[i][0] + "&#39;>" + this.$data[i][1] + "</p></a>";
        temp2 += "<option value=&#39;" + this.$data[i][0] + "&#39;>" + 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=&#39;text&#39;]").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=&#39;#&#39;><p " + (inthis.$haveIcon ? "style=&#39;text-indent:19px;background:" + data[i][2] + "&#39; " : "") + "value=&#39;" + data[i][0] + "&#39;>" + 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=&#39;#&#39;><p "+(this.$haveIcon? "style=&#39;text-indent:19px;background:"+Item[2]+"&#39; " : "")+"value=&#39;"+Item[0]+"&#39;>"+Item[1]+"</p></a>");
        }
        else{
            this.$data.splice(index,0,Item);
            this.$list.children("a:eq("+index+")").before("<a href=&#39;#&#39;><p "+(this.$haveIcon? "style=&#39;text-indent:19px;background:"+Item[2]+"&#39; " : "")+"value=&#39;"+Item[0]+"&#39;>"+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);

             //创建控件结束

})



datas是由ashx一般处理文件生成二维数组的json字符串 var datas=["+jsonString+"]


 
  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());
   
  }








  


















   

Salin selepas log masuk
   





                

            

            

                                

                    Label berkaitan：
                    

                        ajax                    

                

                                
sumber：php.cn

                            

            

                                    
                        Artikel sebelumnya：javascript实现获取指定精度的上传文件的大小简单实例
                    
                                    
                        Artikel seterusnya：关于angularJs指令的Scope(作用域)介绍
                    
                            

            

       
                
Kenyataan Laman Web ini

                
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

            

            

            

                
Artikel terbaru oleh pengarang

                
            

            

                
Isu terkini

                

                                        

                        

                            Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel
                            Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
                            

                                

                                     daripada 2024-04-04 22:16:18
                                

                                

                                    
  0 

                                    
1

                                    
1450

                                

                            

                        

                    

                    

                                        

                        

                            Tajuk yang disemak: Kira jumlah berdasarkan pilihan kotak pilihan
                            Saya sedang membangunkan aplikasi penjejakan kewangan yang mudah. Dalam permohonan itu, te...
                            

                                

                                     daripada 2024-04-04 13:45:50
                                

                                

                                    
  0 

                                    
1

                                    
3465

                                

                            

                        

                    

                    

                                        

                        

                            Menjana kandungan menggunakan Ajax - menatal ke Id tidak berfungsi
                            Saya menjana kandungan halaman berdasarkan data yang diperoleh melalui ajax. Masalah yang ...
                            

                                

                                     daripada 2024-04-04 09:29:39
                                

                                

                                    
  0 

                                    
1

                                    
397

                                

                            

                        

                    

                    

                                        

                        

                            Bagaimana untuk menghantar berbilang senarai dari ajax ke Django
                            Saya mempunyai masalah, saya ingin mendapatkan semua data daripada senarai, jadi saya ingi...
                            

                                

                                     daripada 2024-04-03 23:20:06
                                

                                

                                    
  0 

                                    
1

                                    
362

                                

                            

                        

                    

                    

                                        

                        

                            Muat naik berbilang fail imej dalam CodeIgniter menggunakan Ajax dan PHP
                            Saya menghadapi masalah memuat naik berbilang fail imej ke bahagian pelayan. Alangkah baik...
                            

                                

                                     daripada 2024-04-03 22:35:03
                                

                                

                                    
  0 

                                    
1

                                    
318

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Topik-topik yang berkaitan

                    Lagi>
                    
                

                

                    
                

            

        

    


    

    
    
        

            
Cadangan popular

            

                
            

        

        
        

            

                
Tutorial Popular

                Lagi>
                
            

            

                

                    
Tutorial berkaitan 

                    
Cadangan popular

                    
Kursus terkini

                

                
                
                
            

            
        


        

            

                
Muat turun terkini

                Lagi>
                
            

                        
            

                

                    
kesan web 

                    
Kod sumber laman web

                    
Bahan laman web

                    
Templat hujung hadapan