Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Implementation method of ComBox that can input text to search for ajax drop-down box control

Implementation method of ComBox that can input text to search for ajax drop-down box control

高洛峰
Release： 2016-12-09 10:27:53
Original
1465 people have browsed it

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








  


















   

Copy after login
   





                

            

            

                                

                    Related labels：
                    

                        ajax                    

                

                                
source：php.cn

                            

            

                                    
                        Previous article：A simple example of using JavaScript to obtain the size of an uploaded file with specified precision
                    
                                    
                        Next article：Introduction to Scope (scope) of angularJs instructions
                    
                            

            

       
                
Statement of this Website

                
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

            

            

            

                
Latest Articles by Author

                
            

            

                
Latest Issues

                

                                        

                        

                            Display AWS PDF files in Bootstrap mode in Laravel
                            I have downloaded aws url like https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65...
                            

                                

                                     From 2024-04-04 22:16:18
                                

                                

                                    
  0 

                                    
1

                                    
1450

                                

                            

                        

                    

                    

                                        

                        

                            Revised title: Calculate total based on checkbox selection
                            I'm developing a simple financial tracking application. In the application, there is a tab...
                            

                                

                                     From 2024-04-04 13:45:50
                                

                                

                                    
  0 

                                    
1

                                    
3465

                                

                            

                        

                    

                    

                                        

                        

                            Generating content using Ajax - scrolling to Id doesn't work
                            I generate page content based on data obtained via ajax. The problem I'm having is that wh...
                            

                                

                                     From 2024-04-04 09:29:39
                                

                                

                                    
  0 

                                    
1

                                    
397

                                

                            

                        

                    

                    

                                        

                        

                            How to pass multiple lists from ajax to Django
                            I have a problem, I want to get all the data from the list, so I want to loop through each...
                            

                                

                                     From 2024-04-03 23:20:06
                                

                                

                                    
  0 

                                    
1

                                    
362

                                

                            

                        

                    

                    

                                        

                        

                            Upload multiple image files in CodeIgniter using Ajax and PHP
                            I'm having trouble uploading multiple image files to the server side. It would be great if...
                            

                                

                                     From 2024-04-03 22:35:03
                                

                                

                                    
  0 

                                    
1

                                    
318

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Related Topics

                    More>
                    
                

                

                    
                

            

        

    


    

    
    
        

            
Popular Recommendations

            

                
            

        

        
        

            

                
Popular Tutorials

                More>
                
            

            

                

                    
Related Tutorials 

                    
Popular Recommendations

                    
Latest courses

                

                
                
                
            

            
        


        

            

                
Latest Downloads

                More>
                
            

                        
            

                

                    
Web Effects 

                    
Website Source Code

                    
Website Materials

                    
Front End Template