可输入文字查找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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
微信小程序 数据绑定详解及实例
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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php递归列出所有文件和目录的代码
2008/09/10 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
来自qq的javascript面试题
2010/07/24 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
python中的lambda表达式用法详解
2016/06/22 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
安全守法证明
2015/06/23 职场文书
高一作文之乐趣
2019/11/21 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js