/** * author: Timothy Groves - http://www.brandspankingnew.net * version: 1.2 - 2006-11-17 * 1.3 - 2006-12-04 * 2.0 - 2007-02-07 * */ var useBSNns; if (useBSNns) { if (typeof(bsn) == "undefined") bsn = {} _bsn = bsn; } else { _bsn = this; } if (typeof(_bsn.Autosuggest) == "undefined") _bsn.Autosuggest = {} _bsn.AutoSuggest = function (fldID, param) { // no DOM - give up! // if (!document.getElementById) return false; // get field via DOM // this.fld = _bsn.DOM.getElement(fldID); if (!this.fld) return false; // init variables // this.sInput = ""; this.nInputChars = 0; this.aSuggestions = []; this.iHighlighted = 0; // parameters object // this.oP = (param) ? param : {}; // defaults // if (!this.oP.minchars) this.oP.minchars = 1; if (!this.oP.method) this.oP.meth = "get"; if (!this.oP.varname) this.oP.varname = "input"; if (!this.oP.className) this.oP.className = "autosuggest"; if (!this.oP.timeout) this.oP.timeout = 2500; if (!this.oP.delay) this.oP.delay = 500; if (!this.oP.offsety) this.oP.offsety = -5; if (!this.oP.shownoresults) this.oP.shownoresults = true; if (!this.oP.noresults) this.oP.noresults = "No results!"; if (!this.oP.maxheight && this.oP.maxheight !== 0) this.oP.maxheight = 250; if (!this.oP.cache && this.oP.cache != false) this.oP.cache = true; // set keyup handler for field // and prevent autocomplete from client // var pointer = this; // NOTE: not using addEventListener because UpArrow fired twice in Safari //_bsn.DOM.addEvent( this.fld, 'keyup', function(ev){ return pointer.onKeyPress(ev); } ); this.fld.onkeypress = function(ev){ return pointer.onKeyPress(ev); } this.fld.onkeyup = function(ev){ return pointer.onKeyUp(ev); } this.fld.setAttribute("autocomplete","off"); } _bsn.AutoSuggest.prototype.onKeyPress = function(ev) { var key = (window.event) ? window.event.keyCode : ev.keyCode; // set responses to keydown events in the field // this allows the user to use the arrow keys to scroll through the results // ESCAPE clears the list // TAB sets the current highlighted value // var RETURN = 13; var TAB = 9; var ESC = 27; var bubble = true; switch(key) { case RETURN: this.setHighlightedValue(); bubble = false; break; case ESC: this.clearSuggestions(); break; } return bubble; } _bsn.AutoSuggest.prototype.onKeyUp = function(ev) { var key = (window.event) ? window.event.keyCode : ev.keyCode; // set responses to keydown events in the field // this allows the user to use the arrow keys to scroll through the results // ESCAPE clears the list // TAB sets the current highlighted value // var ARRUP = 38; var ARRDN = 40; var bubble = true; switch(key) { case ARRUP: this.changeHighlight(key); bubble = false; break; case ARRDN: this.changeHighlight(key); bubble = false; break; default: this.getSuggestions(this.fld.value); } return bubble; } _bsn.AutoSuggest.prototype.getSuggestions = function (val) { // if input stays the same, do nothing // if (val == this.sInput) return false; // input length is less than the min required to trigger a request // reset input string // do nothing // if (val.length < this.oP.minchars) { this.sInput = ""; return false; } // if caching enabled, and user is typing (ie. length of input is increasing) // filter results out of aSuggestions from last request // if (val.length>this.nInputChars && this.aSuggestions.length && this.oP.cache) { var arr = []; for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); var span = _bsn.DOM.createElement("span", {}, output, true); if (arr[i].info != "") { var br = _bsn.DOM.createElement("br", {}); span.appendChild(br); var small = _bsn.DOM.createElement("small", {}, arr[i].info); span.appendChild(small); } var a = _bsn.DOM.createElement("a", { href:"#" }); var tl = _bsn.DOM.createElement("span", {className:"tl"}, " "); var tr = _bsn.DOM.createElement("span", {className:"tr"}, " "); a.appendChild(tl); a.appendChild(tr); a.appendChild(span); a.name = i+1; a.onclick = function () { pointer.setHighlightedValue(); return false; } a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); ul.appendChild( li ); } // no results // if (arr.length == 0) { var li = _bsn.DOM.createElement( "li", {className:"as_warning"}, this.oP.noresults ); ul.appendChild( li ); } div.appendChild( ul ); var fcorner = _bsn.DOM.createElement("div", {className:"as_corner"}); var fbar = _bsn.DOM.createElement("div", {className:"as_bar"}); var footer = _bsn.DOM.createElement("div", {className:"as_footer"}); footer.appendChild(fcorner); footer.appendChild(fbar); div.appendChild(footer); // get position of target textfield // position holding div below it // set width of holding div to width of field // var pos = _bsn.DOM.getPos(this.fld); div.style.left = pos.x + "px"; div.style.top = ( pos.y + this.fld.offsetHeight + this.oP.offsety ) + "px"; div.style.width = this.fld.offsetWidth + "px"; // set mouseover functions for div // when mouse pointer leaves div, set a timeout to remove the list after an interval // when mouse enters div, kill the timeout so the list won't be removed // div.onmouseover = function(){ pointer.killTimeout() } div.onmouseout = function(){ pointer.resetTimeout() } // add DIV to document // document.getElementsByTagName("body")[0].appendChild(div); // currently no item is highlighted // this.iHighlighted = 0; // remove list after an interval // var pointer = this; this.toID = setTimeout(function () { pointer.clearSuggestions() }, this.oP.timeout); } _bsn.AutoSuggest.prototype.changeHighlight = function(key) { var list = _bsn.DOM.getElement("as_ul"); if (!list) return false; var n; if (key == 40) n = this.iHighlighted + 1; else if (key == 38) n = this.iHighlighted - 1; if (n > list.childNodes.length) n = list.childNodes.length; if (n < 1) n = 1; this.setHighlight(n); } _bsn.AutoSuggest.prototype.setHighlight = function(n) { var list = _bsn.DOM.getElement("as_ul"); if (!list) return false; if (this.iHighlighted > 0) this.clearHighlight(); this.iHighlighted = Number(n); list.childNodes[this.iHighlighted-1].className = "as_highlight"; this.killTimeout(); } _bsn.AutoSuggest.prototype.clearHighlight = function() { var list = _bsn.DOM.getElement("as_ul"); if (!list) return false; if (this.iHighlighted > 0) { list.childNodes[this.iHighlighted-1].className = ""; this.iHighlighted = 0; } } _bsn.AutoSuggest.prototype.setHighlightedValue = function () { if (this.iHighlighted) { this.sInput = this.fld.value = this.aSuggestions[ this.iHighlighted-1 ].value; // move cursor to end of input (safari) // this.fld.focus(); if (this.fld.selectionStart) this.fld.setSelectionRange(this.sInput.length, this.sInput.length); this.clearSuggestions(); // pass selected object to callback function, if exists // if (typeof(this.oP.callback) == "function") this.oP.callback( this.aSuggestions[this.iHighlighted-1] ); } } _bsn.AutoSuggest.prototype.killTimeout = function() { clearTimeout(this.toID); } _bsn.AutoSuggest.prototype.resetTimeout = function() { clearTimeout(this.toID); var pointer = this; this.toID = setTimeout(function () { pointer.clearSuggestions() }, 1000); } _bsn.AutoSuggest.prototype.clearSuggestions = function () { this.killTimeout(); var ele = _bsn.DOM.getElement(this.idAs); var pointer = this; if (ele) { var fade = new _bsn.Fader(ele,1,0,250,function () { _bsn.DOM.removeElement(pointer.idAs) }); } } // AJAX PROTOTYPE _____________________________________________ if (typeof(_bsn.Ajax) == "undefined") _bsn.Ajax = {} _bsn.Ajax = function () { this.req = {}; this.isIE = false; } _bsn.Ajax.prototype.makeRequest = function (url, meth, onComp, onErr) { if (meth != "POST") meth = "GET"; this.onComplete = onComp; this.onError = onErr; var pointer = this; // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { this.req = new XMLHttpRequest(); this.req.onreadystatechange = function () { pointer.processReqChange() }; this.req.open("GET", url, true); // this.req.send(null); // branch for IE/Windows ActiveX version } else if (window.ActiveXObject) { this.req = new ActiveXObject("Microsoft.XMLHTTP"); if (this.req) { this.req.onreadystatechange = function () { pointer.processReqChange() }; this.req.open(meth, url, true); this.req.send(); } } } _bsn.Ajax.prototype.processReqChange = function() { // only if req shows "loaded" if (this.req.readyState == 4) { // only if "OK" if (this.req.status == 200) { this.onComplete( this.req ); } else { this.onError( this.req.status ); } } } // DOM PROTOTYPE _____________________________________________ if (typeof(_bsn.DOM) == "undefined") _bsn.DOM = {} _bsn.DOM.createElement = function ( type, attr, cont, html ) { var ne = document.createElement( type ); if (!ne) return false; for (var a in attr) ne[a] = attr[a]; if (typeof(cont) == "string" && !html) ne.appendChild( document.createTextNode(cont) ); else if (typeof(cont) == "string" && html) ne.innerHTML = cont; else if (typeof(cont) == "object") ne.appendChild( cont ); return ne; } _bsn.DOM.clearElement = function ( id ) { var ele = this.getElement( id ); if (!ele) return false; while (ele.childNodes.length) ele.removeChild( ele.childNodes[0] ); return true; } _bsn.DOM.removeElement = function ( ele ) { var e = this.getElement(ele); if (!e) return false; else if (e.parentNode.removeChild(e)) return true; else return false; } _bsn.DOM.replaceContent = function ( id, cont, html ) { var ele = this.getElement( id ); if (!ele) return false; this.clearElement( ele ); if (typeof(cont) == "string" && !html) ele.appendChild( document.createTextNode(cont) ); else if (typeof(cont) == "string" && html) ele.innerHTML = cont; else if (typeof(cont) == "object") ele.appendChild( cont ); } _bsn.DOM.getElement = function ( ele ) { if (typeof(ele) == "undefined") { return false; } else if (typeof(ele) == "string") { var re = document.getElementById( ele ); if (!re) return false; else if (typeof(re.appendChild) != "undefined" ) { return re; } else { return false; } } else if (typeof(ele.appendChild) != "undefined") return ele; else return false; } _bsn.DOM.appendChildren = function ( id, arr ) { var ele = this.getElement( id ); if (!ele) return false; if (typeof(arr) != "object") return false; for (var i=0;i