腾讯股票大赛的autoComplete实现"/>
腾讯股票大赛的autoComplete实现
ajax.xml是股票信息列表数据源，通过ajax绑定到autoComplete插件。neverModules-autoComplete.js第311行可以自定义加入选择股票后产生的事件。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/neverModules-autoComplete.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<link href="css/autocomplete.css" rel="stylesheet" type="text/css">
</head><body>
<input type="text" autocomplete="off" name="stock" id="stock" size="25" οnkeyup="AjaxHdle(event)" style="border: 1px solid #000000; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1" οnblur="this.className='inputnormal'" οnfοcus="this.className='inputedit';this.select()" >
</body>
</html>neverModules-autoComplete.js
/** Copyright (c) 2006, www.never-online! All rights reserved.* web : * author : never-online, BlueDestiny* version: 0.12 beta* this is a autocomplete extras version, complete version in neverModules framework.* debug in IE6.0, Opera9.0, Mozilla Firefox1.5.0*//*
neverModules.runtime.useCache = false;
_registerNS(neverModules.modules.autocomplete);
_registerNS(neverModules.configuration.autocomplete)
_extends(neverModules.modules.autocomplete,neverModules.base.baseclass);*//** Copyright (c) 2006, www.never-online! All rights reserved.* Batch default autocomplete configuration* autocomplete 0.12*/var neverModules = window.neverModules || {};var _registerNS = _registerNS || function (ns) {var levels = ns.split("."); var _NS = neverModules;for (var i=(levels[0]=="neverModules")?1:0; i<levels.length; i++) {_NS[levels[i]] = _NS[levels[i]] || {};_NS = _NS[levels[i]];}; return _NS;
};var _createjsClass = _createjsClass || function () {return function () {this._defaultInitializer.apply(this,arguments);};
};_registerNS("neverModules.modules");
_registerNS("neverModules.browser");
_registerNS("neverModules.configuration");neverModules.browser = {isMozilla : (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined'),isIE : window.ActiveXObject?true:false,isOpera : (navigator.userAgent.toLowerCase().indexOf("opera")!=-1)
};if (!neverModules.browser.isIE) {HTMLElement.prototype.click = function() {var evt = this.ownerDocument.createEvent('MouseEvents');evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);this.dispatchEvent(evt);}
};String.prototype.rgEncode = function () {var val = this; if (val=="undefined") { return ""; }val = val.replace(/\\/g,"\\\\");val = val.replace(/\//g,"\\\/");val = val.replace(/\^/g,"\\\^");val = val.replace(/\*/g,"\\\*");val = val.replace(/\?/g,"\\\?");val = val.replace(/\+/g,"\\\+");val = val.replace(/\./g,"\\\.");val = val.replace(/\|/g,"\\\|");val = val.replace(/\[/g,"\\\[");val = val.replace(/\]/g,"\\\]");val = val.replace(/\(/g,"\\\(");val = val.replace(/\)/g,"\\\)");val = val.replace(/\{/g,"\\\{");val = val.replace(/\}/g,"\\\}");return val;
}function getAbsoluteCoords (e) {var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight;while (e=e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; };return { top: t, left: l, width: w, height: h, bottom: t+h, right: l+w }
}if (typeof addEvent != 'function')
{var addEvent = function(o, t, f, l){var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l;if (o[d] && !l) return o[d](t, f, false);if (!o._evts) o._evts = {};if (!o._evts[t]){o._evts[t] = o[n] ? { b: o[n] } : {};o[n] = new Function('e','var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' +'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +'} return r');if (t != 'unload') addEvent(window, 'unload', function() {removeEvent(rO, rT, rF, rL);});}if (!f._i) f._i = addEvent._i++;o._evts[t][f._i] = f;};addEvent._i = 1;var removeEvent = function(o, t, f, l){var d = 'removeEventListener';if (o[d] && !l) return o[d](t, f, false);if (o._evts && o._evts[t] && f._i) delete o._evts[t][f._i];};
};neverModules.configuration.autocomplete = {defaultAnimateImage : {src:"images/animated_loading.gif"},defaultSliceRange : {low: 0, high: 200},defaultIsUseContent : false,defaultAutoSlice : true,defaultIgnoreSpeed : false,defaultIgnoreCase : true,defaultIgnoreWhere : true,defaultUseSpaceMatch: true,defaultIsUseArrow : true,defaultCallbackHdle : function(){},defaultDataSource : [],defaultHeight : 200,defaultMaxSlice : 200,defaultSpaceMatchRg : "\.\{1,}",_defaultInvalidCode : [13,38,40,27,9,17,16],_defaultSelectedIdx : -1,_defaultStatus : 0,_defaultInitObject : null,_defaultStyleCss : "neverModules-auto",_defaultHighlightTag: {start: "<strong>", end: "</strong>"}}neverModules.modules.autocomplete = _createjsClass();neverModules.modules.autocomplete.prototype = {_defaultInitializer: function (configuration) {this.name = configuration.instanceName;this.textbox = configuration.textbox;this.returnBox = configuration.returnBox||this.textbox;this.maxSlice = neverModules.configuration.autocomplete.defaultMaxSlice;this.sliceRange = neverModules.configuration.autocomplete.defaultSliceRange;this.ignoreSpeed = !!neverModules.configuration.autocomplete.defaultIgnoreSpeed;this.ignoreCase = !!neverModules.configuration.autocomplete.defaultIgnoreCase;this.ignoreWhere = !!neverModules.configuration.autocomplete.defaultIgnoreWhere;this.autoSlice = !!neverModules.configuration.autocomplete.defaultAutoSlice;this.useContent = !!neverModules.configuration.autocomplete.defaultIsUseContent;this.useArrow = !!neverModules.configuration.autocomplete.defaultIsUseArrow;this.useSpaceMatch = !!neverModules.configuration.autocomplete.defaultUseSpaceMatch;this.spaceMatchRg = neverModules.configuration.autocomplete.defaultSpaceMatchRg;this.animateImage = neverModules.configuration.autocomplete.defaultAnimateImage;this.callback = neverModules.configuration.autocomplete.defaultCallbackHdle;this.scrollHeight = isNaN(parseInt(configuration.height))?neverModules.configuration.autocomplete.defaultHeight:parseInt(configuration.height);/* Initialize private variables */this._currentVer = 0.12;this._formatData = [];this._inTheCacheData = false;this._cacheValue = "$NEVERMODULES_NULL_STRING$";this._selectedIdx = neverModules.configuration.autocomplete._defaultSelectedIdx;this._currentStatus = neverModules.configuration.autocomplete._defaultStatus;this._cacheData = neverModules.configuration.autocomplete._defaultInitObject;this._completeContainer = neverModules.configuration.autocomplete._defaultInitObject;this._completeIframe = neverModules.configuration.autocomplete._defaultInitObject;this._completeStyle = configuration.style||neverModules.configuration.autocomplete._defaultStyleCss;this._dataSource = configuration.dataSource||neverModules.configuration.autocomplete._defaultDataSource;this._highlightTag = neverModules.configuration.autocomplete._defaultHighlightTag;this._invalidKeyCode = neverModules.configuration.autocomplete._defaultInvalidCode;this._inputValue = "$NEVERMODULES_NULL_STRING$";},_createAutocomplete: function () { with(this) {if (!document.body) throw new Error(["neverModules Error","Document <BODY> not loaded，Can not create autoComplete"]);textbox.setAttribute("autocomplete","off");_completeContainer = document.createElement("DIV");document.body.appendChild(_completeContainer);_completeContainer.className = this._completeStyle;with (_completeContainer.style) {height = scrollHeight+"px"; overflow = "auto";zIndex = "2"; position = "absolute"; display = "none";};var self = this;_completeContainer.onscroll = function () {self.textboxFocus();};if (neverModules.browser.isIE) {_completeIframe = document.createElement("iframe");document.body.appendChild(_completeIframe);with (_completeIframe.style) {position = "absolute"; display = "none";zIndex = "1"; overflow = "hidden";frameBorder = "0"; scrolling = "no";marginHeight = "0"; marginWidth = "0";};_completeContainer.onselectstart = function () {window.returnValue=false;};};addEvent(document,'mousedown', function (evt) {e = window.event?window.event.srcElement:evt.target;try {if (!self._queryTheContainer(e)) {self.close();} else { self.textboxFocus(); }} catch(ex) {};});// add a event listener to close autocomplete,// when the focus is not in the autocomplete(input control).addEvent(document,'keyup', function (evt) {e = window.event?window.event.srcElement:evt.target;try {if (!self._queryTheContainer(e)) {self.close();} else { self.textboxFocus(); }} catch(ex) {};});if (this._currentStatus) this.show();}},_encode: function (str) {str = str+"";str = str.replace(/\ /g, " ");str = str.replace(/\ /g, " ");//str = str.replace(/</g,"<");//str = str.replace(/>/g,">");return str;},_decode: function (str) {str = str+"";str = str.replace(/ /g, " ");//str = str.replace(/</g,"<");//str = str.replace(/>/g,">");return str;},_queryTheContainer: function (e) {while(e && e.tagName!="BODY") {if (!e) return false;if (e==this.textbox || e==this._completeContainer) {return true;}; e=e.parentNode;}; return false;},_fireCallbackHdle: function () {if (typeof (this.callback)=="function") {this.callback.apply(this, arguments);}},_hdleFactory: function (hdle, aArgs) {aArgs = aArgs || [];if ("formatDatasource"==hdle) {return this.useContent==true?this._formatMutiDataSource.apply(this, aArgs):this._formatSingleDataSource.apply(this, aArgs);} else if ("query"==hdle) {return this.useContent==true?this._queryMutiDataSource.apply(this, aArgs):this._querySingleDataSource.apply(this, aArgs);} else if ("toggle"==hdle) {return this.useContent==true?this._hdleMutiToggle.apply(this, aArgs):this._hdleSingleToggle.apply(this, aArgs);} else if ("arrow"==hdle) {return this.useContent==true?this._hdleMutiArrow.apply(this, aArgs):this._hdleSingleArrow.apply(this, aArgs);}},_hdleQuery: function (strQuery) {if (!strQuery) return false;return this._hdleFactory("query",arguments);},_hdleToggle: function (oElement, sClassName1, sClassName2, sClassName3) {this._hdleFactory("toggle",arguments);},_hdleClick: function (oElement) {var text = this.getSelectedValue(oElement).text;var content = this.getSelectedValue(oElement).content;this._inputValue = text;// window.location.href='wt.asp?stock='+content+'&mmlb=B';this.returnBox.value = content;this._fireCallbackHdle(text, content);this.close(); this.textboxFocus();},_hdleFormatDataSource: function () {return this._hdleFactory("formatDatasource", arguments);},/** Copyright (c) 2006, www.never-online! All rights reserved.* the following that is the event handler* autocomplete 0.12*/_hdleSingleArrow: function (nKeyCode) { with(this) {var r = _completeContainer.getElementsByTagName("div");switch (nKeyCode) {case 13: // Enterr[this._selectedIdx]?r[this._selectedIdx].click():null;break;case 38: // Up arrowthis._selectedIdx--;break;case 40: // Down arrowthis._selectedIdx++;break;case 27: // ESCthis.close();break;default:return;}this._selectedIdx<=-1?this._selectedIdx=0:this._selectedIdx>r.length-1?this._selectedIdx=r.length-1:"";if (!r[this._selectedIdx]) return;this._completeContainer.scrollTop=this._getRelativeScrollTop(r[this._selectedIdx]);this._hdleToggle(r[this._selectedIdx],'over');this._selectedIdx>0?this._hdleToggle(r[this._selectedIdx-1],'out'):"";this._hdleToggle(r[this._selectedIdx+1],'out');this._createRange(r[this._selectedIdx]);}},_hdleMutiArrow: function (nKeyCode) {var a = this._completeContainer.childNodes[0];var r = a.getElementsByTagName("TR");switch (nKeyCode) {case 13: // Enterr[this._selectedIdx]?r[this._selectedIdx].click():"";break;case 38: // Up arrowthis._selectedIdx--;break;case 40: // Down arrowthis._selectedIdx++;break;case 27: // ESCthis.close();break;default:return;}this._selectedIdx<=-1?this._selectedIdx=0:this._selectedIdx>r.length-1?this._selectedIdx=r.length-1:"";if (!r[this._selectedIdx]) return;this._completeContainer.scrollTop=this._getRelativeScrollTop(r[this._selectedIdx]);this._hdleToggle(r[this._selectedIdx],'over','autot-over','autoc-over');this._selectedIdx>0?this._hdleToggle(r[this._selectedIdx-1],'out','autot','autoc'):"";r[this._selectedIdx+1]?this._hdleToggle(r[this._selectedIdx+1],'out','autot','autoc'):"";this._createRange(r[this._selectedIdx]);},_createRange: function (oElement) {if (!oElement) return; var rng;var text = this.getSelectedValue(oElement).text;var content = this.getSelectedValue(oElement).content;//this.returnBox.value = text;this.returnBox.value = content;if (neverModules.browser.isIE) {try {rng = this.textbox.createTextRange();rng.moveStart("character", this._inputValue.length);rng.select(); rng=null;} catch (ex) {};} else {//TODO}},_tg: function (oElement) {this._hdleToggle.apply(this, arguments);},_hdleMutiToggle: function (oElement, sClassName1, sClassName2, sClassName3) {if (!oElement) return;var a = this._completeContainer;oElement.tagName=="TR"?oElement.className=sClassName1:"";var a = oElement.childNodes;for(var i=0; i<a.length; i++) {if (a[i].nodeType==1) {if (a[i].className.toLowerCase().indexOf("autot")>-1) {a[i].className=sClassName2;} else if (a[i].className.toLowerCase().indexOf("autoc")>-1) {a[i].className=sClassName3;}}}},_hdleSingleToggle: function (oElement, sClassName) {if (!oElement) return; oElement.className = sClassName;},_hc: function (oElement) {this._hdleClick.apply(this, arguments);},_ckSpaceMatchQuery: function (strQuery) {strQuery=strQuery+""; if (!this.useSpaceMatch) return strQuery;strQuery = this.useSpaceMatch?strQuery.replace(/ /g,"\|"):strQuery;return strQuery;},/** Copyright (c) 2006, www.never-online! All rights reserved.* the following that is the private method* autocomplete 0.12*/_getRelativeScrollTop: function (e) {return e.offsetTop;},_querySingleDataSource: function (strQuery) {var rQuery = this._ckSpaceMatchQuery(strQuery);strQuery = this.useSpaceMatch?strQuery.replace(/ /g,this.spaceMatchRg):strQuery;var rg = new RegExp()pile('<div[^<>]+?>' +(this.ignoreWhere?'[^<>]*?':'')+strQuery+'[^<>]*?<\/div>',this.ignoreCase?"ig":"g");var sDataSource = (this._inTheCacheData?this._cacheData:this._hdleFormatDataSource())+"";var aMatch = sDataSource.match(rg); rg = null;if (!aMatch) { this.close(); return false; }if (this.ignoreSpeed==true) {rg = new RegExp()pile("(?:>)([^<>]*?)(" +rQuery+ ")", this.ignoreCase?"ig":"g");return this._cacheData=(this.autoSlice && aMatch.length>this.maxSlice?aMatch.slice(this.sliceRange.low, this.sliceRange.high).join(""):aMatch.join("")).replace(rg, ">$1" +this._highlightTag.start+ "$2" +this._highlightTag.end +"");} else {return this._cacheData=this.autoSlice && aMatch.length>this.maxSlice?aMatch.slice(this.sliceRange.low, this.sliceRange.high).join(""):aMatch.join("");}},_queryMutiDataSource: function (strQuery) {var rQuery = this._ckSpaceMatchQuery(strQuery);strQuery = this.useSpaceMatch?strQuery.replace(/ /g,this.spaceMatchRg):strQuery;var a=(this._inTheCacheData?(this._cacheData||[]).length>0?this._cacheData:this._dataSource:this._dataSource)||[];var text, content, hints, rText, rg; this._formatData=[];if(!isNaN(rQuery)) this.ignoreWhere=false;else this.ignoreWhere=true;ExpStr = this.ignoreWhere?"(.*?)(" +rQuery+ ")(.*?)":"^(" +rQuery+ ")(.*?)";//alert(ExpStr);rg = new RegExp()pile(ExpStr,this.ignoreCase?"ig":"g");for (var i=0; i<a.length; i++) {text=a[i].text?a[i].text:"";content=a[i].content?a[i].content:"";hints=a[i].hints?a[i].hints:"";rText="";text=this._encode(text);if (text.match(rg)) {var rg = new RegExp(ExpStr,this.ignoreCase?"ig":"g");rText = text.replace(rg,this.ignoreWhere?"$1" +this._highlightTag.start+ "$2" +this._highlightTag.end+ "$3":"" +this._highlightTag.start+ "$1" +this._highlightTag.end+ "$2");this._formatData.push({text:text, content:content, hints:hints, rText: rText});}}/* reset cache data */this._cacheData = [];this._cacheData = this._cacheData.concat(this._formatData);this._formatData = this.autoSlice && this._formatData.length>this.maxSlice?this._formatData.slice(this.sliceRange.low, this.sliceRange.high):this._formatData;return this._hdleFormatDataSource();},_formatSingleDataSource: function () {var strHTML=""; var a=this._dataSource||[];if (a.length==1) {strHTML = ''+ '<div class="out" οnclick="' +this.name+'._hc(this)" οnmοuseοver="' +this.name+'._tg(this,\'over\')" οnmοuseοut="' +this.name+'._tg(this,\'out\')">' +a[0]+ '</div>';} else {strHTML = ''+ '<div class="out" οnclick="' +this.name+'._hc(this)" οnmοuseοver="'+ this.name+'._tg(this,\'over\')" οnmοuseοut="'+ this.name+'._tg(this,\'out\')">\n'+a.join('</div>\n<div class="out" οnclick="'+ this.name+'._hc(this)" οnmοuseοver="' +this.name+'._tg(this,\'over\')" οnmοuseοut="'+ this.name+'._tg(this,\'out\')">\n')+"\n</div>";}return strHTML;},_formatMutiDataSource: function () {var a = this._formatData||[]; var strBuilder = [];var text,rText,content,hints,strHTML;var maxShow = a.length >10 ? 10 : a.length;for (var i=0; i<maxShow; i++) {rText=a[i].rText?a[i].rText:a[i].text;text=this._encode(a[i].text?a[i].text:"");content=this._encode(a[i].content?a[i].content:"");hints=this._encode(a[i].hints?a[i].hints:"");rText=this._decode(rText);strBuilder.push(''+ '\n<tr title="' +hints+ '" uid="' +i+ '" class="out" txt="' +text+ '" content="' +content+ '" οnclick="' +this.name+'._hc(this)" οnmοuseοver="' +this.name+'._tg(this,\'over\',\'autot-over\',\'autoc-over\')" οnmοuseοut="' +this.name+'._tg(this,\'out\',\'autot\',\'autoc\')">\n<td class="autot">' +rText+ '</td>\n<td class="autoc">' +content+ '</td>\n</tr>\n');}strHTML = '<table border="0" id="' +this.name+ '_complete_table" cellspacing="0" cellpadding="0" width="100%">';strHTML += strBuilder.join("")strHTML += "</table>";return strHTML;},_showAnimateImage: function (src, width, height) {if (!!src) this.setAnimateImage.apply(this,arguments);var o = this.animateImage;var p = new Image(); var ig; var self = this;p.src=o.src; p.width=o.width?o.width:p.width;p.height=o.height?o.height:p.height;if (document.getElementById("autocompleteAnimateImageId") &&document.getElementById("autocompleteAnimatecontainerId")) {ig = document.getElementById("autocompleteAnimateImageId");c=document.getElementById("autocompleteAnimatecontainerId");ig.src = p.src; ig.width = p.width; ig.height = p.height;animateImageShow(); return;}var c = document.createElement("DIV"); c.id = "autocompleteAnimatecontainerId";ig = document.createElement("IMG"); ig.id = "autocompleteAnimateImageId";ig.src = p.src; ig.width = p.width; ig.height = p.height; c.style.display = "none";document.body.appendChild(c); c.appendChild(ig); animateImageShow();function animateImageShow() {var os = getAbsoluteCoords(self.textbox);with (c.style) {left = os.left+os.width-p.width-2+"px";top = os.top+Math.round((os.height-p.height)/2)-(neverModules.browser.isIE?-1:2)+"px";zIndex = "10"; position = "absolute"; display = "block";}}},_setCacheValue: function (strValue) {/** using cache array to improve the query speed performace* must be set the ignoreSpeed with false value* 缓存存于cacheData中，使用cache来提高查询速度。大数据量时有效* 此功能还有一个好处,可以减少与服务器的交互（在AJAX时）*/this._inTheCacheData = false;if (this._cacheValue=="" ||(!this._cacheData)) {this._inTheCacheData=false;this._cacheValue = strValue;return;};if (this._cacheValue==strValue.substring(0,this._cacheValue.length)) {this._inTheCacheData = true;}; this._cacheValue = strValue;},/** Copyright (c) 2006, www.never-online! All rights reserved.* the following that is the public method* autocomplete 0.12* interface list*/show: function () {this._currentStatus = 1;var p = getAbsoluteCoords(this.textbox);var x = this._completeContainer.style;x.left = p.left+"px"; x.top = p.top+p.height+"px";x.width = p.width+"px"; x.display = "block";if (neverModules.browser.isIE) {var w = this._completeIframe.style;w.display = "block"; w.left = p.left+"px"; w.top = p.top+p.height+"px";w.width = p.width+"px"; w.height = this._completeContainer.offsetHeight+"px";}try {var a = document.getElementById(this.name+ "_complete_table");if (a.offsetHeight>=this._completeContainer.offsetHeight) {a.setAttribute("width",this.textbox.offsetWidth-18);a.setAttribute("height",this.scrollHeight);}} catch(e) {};this._completeContainer.scrollTop = '0px';},close: function (e) {try {if (neverModules.browser.isIE) this._completeIframe.style.display = "none";this._completeContainer.style.display = "none";this._currentStatus = 0;} catch (ex) {};},clearDataSource: function () {this._dataSource = [];this._cacheData = [];},setDataSource: function (aDataSource) {if (aDataSource.constructor!=Array) return;this.close(); this.clearDataSource();this._dataSource = aDataSource; // reference//this._dataSource = aDataSource.join("$NEVER_MODULES_SPLIT$").split("$NEVER_MODULES_SPLIT$");},getSelectedValue: function (oElement) {if (!oElement) return {text: "null", content: "null"};var text = this.useContent?oElement.getAttribute("txt"):oElement.innerHTML.replace(/<[^<>]*>/g,"");var content = this.useContent?oElement.getAttribute("content"):"";return {text: text, content: content};},expandAllItem: function () {this._formatData = this._dataSource;this._completeContainer.innerHTML = this._hdleFormatDataSource();this.show();},hdleEvent: function (evt) {var strQuery = this.textbox.value.rgEncode(); var strHTML;var nKeyCode = window.event?event.keyCode:evt.which;if (strQuery == "" && this._currentStatus==0) { this.close(); return; }if (this.isValidKey(evt)==false) {if ((!this._currentStatus) || (this.useArrow!=true && nKeyCode!=27)) return;this._hdleFactory("arrow",[nKeyCode]); return;};this._inputValue = strQuery;this._setCacheValue(strQuery); this._completeContainer.innerHTML = "";this._selectedIdx = -1; strHTML = this._hdleQuery(strQuery);if (strHTML!=false) {this._completeContainer.innerHTML = strHTML;this.show();} else {this.close();this._inTheCacheData = false;}},isValidKey: function (evt) {var nKeyCode = window.event?event.keyCode:evt.which;for (var key in this._invalidKeyCode) {if (nKeyCode==this._invalidKeyCode[key])return false;}; return true;},showAnimateImage: function (src, width, height) {this._showAnimateImage.apply(this, arguments);},closeAnimateImage: function () {try { document.getElementById("autocompleteAnimatecontainerId").style.display="none"; }catch (ex) {};},setAnimateImage: function (src, width, height) {if (!src) return;this.animateImage = {src:src, width:width, height:height};},isRequireAjax: function () {return (!this._inTheCacheData);},isinCache: function () {return this.isRequireAjax();},dispose: function () {try {this._completeContainer.parentNode.removeChild(this._completeContainer);if (neverModules.browser.isIE)this._completeIframe.parentNode.removeChild(this._completeIframe);} catch (ex) {};},create: function () {this._createAutocomplete();},textboxFocus: function () {//禁止focusreturn;if (this.textbox)this.textbox.focus();}
}
ajax.js
/* 兼容IE 7.0以前版本 XMLHttpRequest */if (window.ActiveXObject) {window.XMLHttpRequest = function() {var x = null; var progIds = ['MSXML3.XMLHTTP.5.0','MSXML3.XMLHTTP.4.0','MSXML3.XMLHTTP.3.0','MSXML3.XMLHTTP.2.0','MSXML3.XMLHTTP','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];for (var i=0; i<progIds.length; i++){try { x = new ActiveXObject(progIds[i]); break; } catch (ex) {};}; if (!x) throw new Error([0,"Can not create XMLHttpRequest Object"]);return x;};};/* Global XMLHttpRequest and autoComplete object *//* 全局的XMLHttpRequest对象和autoComplete对象 */var http = callbackHttp = null; var autoComplete = null;var dataSource = null;window.onload = function pageLoadHdle() {var completeConfiguration = {instanceName: "autoComplete",textbox: document.getElementById("stock"),height: 150};/* Create a new instance of autoComplete *//* 创建自动完成的实例 */autoComplete = new neverModules.modules.autocomplete(completeConfiguration);autoComplete.useContent = true;/* 以下为可选项，这里的示例都是默认值 { */ /* 当useContent为false时，此功能生效，确定是否忽略速度，如果不忽略速度，则效率提高30%左右，（没测试过，估计的），也就是没有高亮功能，适合纯DHTML的匹配 */autoComplete.ignoreSpeed = false;/* 开启方向键（小键盘） */autoComplete.useArrow = true;/* 当数据量较大时，自动截取前部分的数据，提高效率 */autoComplete.autoSlice = true;/* 无论输入字符串在dataSource的何处，始终匹配 */autoComplete.ignoreWhere = false;/* 一个空格代表一个或多个字符（串） */autoComplete.useSpaceMatch = true;/* 忽略大小写 */autoComplete.ignoreCase = true;/* 以上为可选项，这里的示例都是默认值 } */ //autoComplete.callback = callbackHdle;/* Create autoComplete *//* 创建自动完成 */autoComplete.create();}function AjaxHdle (evt){//如果用户的网速很满,无法等待页面加载完,就要开始使用股票查询,则需要马上创建,而不是等待漫长的页面加载完之后,触发onload事件再去创建对象if(autoComplete==null){pageLoadHdle();}/* If the keycode is not a valid key or the query value in the cache, show autocomplete *//* 如果输入的键是有效的，即非方向键等无效键，或是在缓存中有该值，则显示自动完成 */if (autoComplete.isValidKey(evt)==false || autoComplete.isRequireAjax()==false || dataSource!=null) {showAutocomplete(evt);return;}/* 异步获取数据 */http = new XMLHttpRequest();http.onreadystatechange = function() {loadCompleteData(evt)};http.open("GET", "data/ajax.xml", true);http.send(null);}/* 异步得到数据后加载dataSource */function loadCompleteData (evt) {if (http.readyState!=4) { return; }var _document = http.responseXML;var dataValue = _document.documentElement.getElementsByTagName("dataSource")[0].firstChild.nodeValue;dataSource = window.eval(dataValue);autoComplete.setDataSource(dataSource);showAutocomplete(evt); http=null;}/* 显示autoComplete */function showAutocomplete(evt) {autoComplete.hdleEvent(evt);window.setTimeout(function () {autoComplete.closeAnimateImage();},1000);}/* callback 回调函数 */function callbackHdle(autocompleteValue, autocompleteContent) {document.getElementById("loading").style.display="block";callbackHttp = new XMLHttpRequest();callbackHttp.onreadystatechange = loadCallbackData;callbackHttp.open("GET", "./search", true);callbackHttp.send(null);}function loadCallbackData() {if (callbackHttp.readyState!=4) { return; }window.setTimeout(function() {document.getElementById("loading").style.display="none";callbackHttp = null;},1000);}
autocomplete.css
/* present by never-online *//* this is the autocomplete container style, summary style */
.neverModules-auto {border:1px solid #000;background-color:#fff;width:100%;margin:0;padding:0;-moz-user-select:none;
}/* this the autocomplete property useContent is not true,
the style is the item css, default style or onmouseout style */
.neverModules-auto .out {width:100%;color:#000;-moz-user-select:none;
}/* this the autocomplete property useContent is not true,
the style is the item css, highlight (onmouseover) style */
.neverModules-auto .over {width:100%;color:highlighttext;background-color:#3366CC;-moz-user-select:none;
}/* -----------------------------------------------------------------
if autocomplete property useContent is true, using folowing style----------------------------------------------------------------- *//* text style, in the left of the autocomplete container */
.neverModules-auto .autot {font-size:9pt;color:#000;text-align:left;padding-left:5px;width:100%;-moz-user-select:none;
}.neverModules-auto .autot-over {font-size:9pt;color:#fff;text-align:left;padding-left:5px;width:100%;-moz-user-select:none;
}/* autocomplete right content default */
.neverModules-auto .autoc {font-size:8pt;color:#008000;text-align:right;padding-right:0px;display: none;width:0%;-moz-user-select:none;
}.neverModules-auto .autoc-over {font-size:8pt;color:#fff;text-align:right;padding-right:0px;display: none;width:0%;-moz-user-select:none;
}
源码下载：stock
更多推荐
腾讯股票大赛的autoComplete实现
发布评论