可輸入文字查找ajax下拉框控件 ComBox的實現(xiàn)方法
更新時間：2016年10月25日 09:32:26 投稿：jingxian
下面小編就為大家?guī)硪黄奢斎胛淖植檎襛jax下拉框控件 ComBox的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
GooFunc.js文件
//獲取一個DIV的絕對坐標(biāo)的功能函數(shù),即使是非絕對定位,一樣能獲取到
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
};
}
//兼容各種瀏覽器的,獲取鼠標(biāo)真實位置
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的詳細(xì)參數(shù)設(shè)置
//目前，構(gòu)造函數(shù)可接受用普通DOM容器或者直接傳送SELECT控件來進(jìn)行渲染
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=[];//下拉框控件的所有顯示文字和值,二維數(shù)組
this.$type="basic";//下拉框控件的運(yùn)行模式，有basic基本,multiple可多選,filter過濾顯示 三種,默認(rèn)為basic
this.$selectHeight=property.selectHeight||0;
this.$list=$("<ul style='width:"+(this.$width-2)+"px;height:"+property.selectHeight+"px;'></ul>");//下拉框的列表JQUERY對象
this.$lastSelect=null;//當(dāng)前最近一次被選中的單元,在this.$type="multiple"時，它將不發(fā)揮其記錄作用
this.$select = null; //保存所選值的單元一般為select控件
this.$autoLoad=false;//是否動設(shè)置為動態(tài)載入數(shù)據(jù)，既下拉動作觸發(fā)時再載入數(shù)據(jù)，默認(rèn)為FALSE()
this.$alreadyLoad=false;//是否已經(jīng)載入完了數(shù)據(jù),默認(rèn)為false
//設(shè)置為動態(tài)自動獲取數(shù)據(jù)(渲染后Combo中的input框被選中后載入數(shù)據(jù))
this.setAutoLoad=function(bool){
this.$autoLoad=true;
};
if(property.autoLoad) this.setAutoLoad(property.autoLoad);
this.$ajaxType=null;//，其變量為一個遠(yuǎn)程鏈接參數(shù)的JSON數(shù)組，格式例如：{url:"website/pp.php",type:"POST",para:(與JQUERY中的AJAX方法中傳參DATA一樣)}默認(rèn)為空
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);
//開始構(gòu)造函數(shù)主要內(nèi)容
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"的默認(rèn)設(shè)置
//ID,NAME,TYPE如果在傳入SELECT時就已經(jīng)通過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");
}
//載入一組數(shù)據(jù)的方法
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 當(dāng)鼠標(biāo)點擊進(jìn)去是否展現(xiàn)初始數(shù)據(jù)
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);
//動態(tài)遠(yuǎn)程載入數(shù)據(jù)，AJAX請求的參數(shù)將讀取this.$ajaxType中的設(shè)置
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)
});
}
});
//綁定當(dāng)INPUT框被選中時的事件
this.$input.bind("focus", { inthis: this }, //如果this.$autoLoad或!this.$alreadyLoad有一個為FALSE，則ajaxType將無效，可不傳
function (e) {
if (e && e.preventDefault) e.preventDefault(); //阻止默認(rèn)瀏覽器動作(W3C)
else window.event.returnValue = false; //IE中阻止函數(shù)器默認(rèn)動作的方式
var inthis = e.data.inthis;
// inthis.$autoLoad = true;
//
//
// inthis.$alreadyLoad = false;
// inthis.$ajaxType = false;
if (!inthis.$alreadyLoad && inthis.$autoLoad) {
if (inthis.$ajaxType) {//如果是遠(yuǎn)程AJAX獲取數(shù)據(jù)
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;
});
//綁定當(dāng)INPUT框中的內(nèi)容被改變時的事件
if(!this.$readOnly){
if(this.$type=="filter"){//當(dāng)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屬性有設(shè)置，則filter模式下，下拉框控件將在每次change時，動態(tài)從獲取數(shù)據(jù)
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("進(jìn)入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模式，且這個值原來已經(jīng)被選定，則運(yùn)行此函數(shù)后將會取消該選定）
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();//阻止默認(rèn)瀏覽器動作(W3C)
else window.event.returnValue = false;//IE中阻止函數(shù)器默認(rèn)動作的方式
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;
});
//綁定當(dāng)用戶用鼠標(biāo)上/下滑過選擇列表內(nèi)容時的事件
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");
});
//綁定當(dāng)用戶用上/下方向鍵選擇列表內(nèi)容時的事件
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();//阻止默認(rèn)瀏覽器動作(W3C)
else window.event.returnValue = false;//IE中阻止函數(shù)器默認(rèn)動作的方式
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();
}
}
});
//返回下拉框的被選值//如果是多選，則會返回一串值構(gòu)成的字符串，以逗號隔開
//此下拉框也可放在一般的FORM之中，并像普通的SELECT下拉菜單控件一樣操作，當(dāng)FORM提交時，后臺可request獲取一個被選取值的數(shù)組
this.getValue=function(){
return this.$select.val();
};
//綁定當(dāng)控件中隱藏的SELECT的值變化以后,觸發(fā)的方法,通過對其設(shè)置，可達(dá)到drop-on-drop的多個下拉框相互聯(lián)動功能,參數(shù)Fn為要觸發(fā)執(zhí)行的函數(shù)
this.bindValueChange=function(Fn){
this.$select.bind("change", Fn);
};
//刪除一個選擇項,index為定位參數(shù)，從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為定位參數(shù)，從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;
};
}
//將此類的構(gòu)造函數(shù)加入至JQUERY對象中
jQuery.extend({
createGooCombo: function(dom,property) {
return new GooCombo(dom,property);
}
}); </pre><br>
HTML頁面:(要先引入jquery 庫)<br>
$(document).ready(function () {<br>
<br>
//創(chuàng)建控件開始<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>
//創(chuàng)建控件結(jié)束<br>
})<br>
<br>
<span style="color:#FF0000">datas是由ashx一般處理文件生成二維數(shù)組的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>
以上就是小編為大家?guī)淼目奢斎胛淖植檎襛jax下拉框控件 ComBox的實現(xiàn)方法全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
很多開發(fā)者都知道jQuery的.live()方法，他們大部分知道這個函數(shù)做什么，但是并不知道是怎么實現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽過還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識到.die()了嗎？2011-09-09
在Web開發(fā)中，經(jīng)常會涉及到文件上傳。文件上傳時通常都要驗證文件的有效性，這個通常就要用正則表達(dá)式來判斷。2015-05-05
此筆記只是作為本人學(xué)習(xí)JQuery的隨手筆記,稍微做了一下整理,希望對新人有參考價值。2009-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)容篩選選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery通過擴(kuò)展實現(xiàn)抖動效果的方法
這篇文章主要介紹了jQuery通過擴(kuò)展實現(xiàn)抖動效果的方法,涉及jQuery擴(kuò)展的技巧及抖動特效的實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹通過Jquery如何給基本控件的取值、賦值,需要的朋友可以參考下2014-05-05
jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別實例分析
這篇文章主要介紹了jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別,結(jié)合實例形式分析了jQuery.extend與jQuery.fn.extend的功能、使用方法及區(qū)別,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了jQuery簡單實現(xiàn)中間浮窗效果,涉及jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery使用each方法與for語句遍歷數(shù)組示例
這篇文章主要介紹了jQuery使用each方法與for語句遍歷數(shù)組,結(jié)合實例形式簡單對比分析了兩種方法在遍歷數(shù)組時的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
JQuery實現(xiàn)ul中添加LI和刪除指定的Li元素功能完整示例
這篇文章主要介紹了JQuery實現(xiàn)ul中添加LI和刪除指定的Li元素功能,結(jié)合完整實例形式分析了jQuery基于事件響應(yīng)的頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-10-10