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的實現方法全部內容了,希望大家多多支持~