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;
}
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
this.$btn=$("");//下拉框右部的按钮
this.$data=[];//下拉框控件的所有显示文字和值,二维数组
this.$type="basic";//下拉框控件的运行模式，有basic基本,multiple可多选,filter过滤显示 三种,默认为basic
this.$selectHeight=property.selectHeight||0;
this.$list=$("
" + this.$data[i][1] + "
"; temp2 += ""; } 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 +="" + data[i][1] + "
"; } 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"+Item[1]+"
"); } else{ this.$data.splice(index,0,Item); this.$list.children("a:eq("+index+")").before(""+Item[1]+"
"); } 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());
}以上就是小编为大家带来的可输入文字查找ajax下拉框控件 ComBox的实现方法全部内容了，希望大家多多支持脚本之家~