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


Posted in Javascript onOctober 25, 2016

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下拉框控件 ComBox的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
微信小程序 数据绑定详解及实例
Oct 25 #Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 #Javascript
javascript 中的事件委托详解
Oct 25 #Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
谈谈target=_new和_blank的不同之处
Oct 25 #Javascript
js实现上传图片预览方法
Oct 25 #Javascript
You might like
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python中使用np.delete()的实例方法
2021/02/01 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
教师简历自我评价
2014/02/03 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
百年孤独读书笔记
2015/06/29 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Python序列化模块JSON与Pickle
2022/06/05 Python