/** * * Adapted by: View Strategic - http://www.view.uk.com * Original script: Timothy Groves - http://www.brandspankingnew.net * version: 2.0v - 09-05-2008 * **/ var init = true; 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 //09/05/2008 this.fld = _bsn.DOM.getElement(fldID); if (!this.fld) return false; // init variables // this.sInput = ""; this.nInputChars = 0; this.aSuggestions = []; // var aHome = []; var aBusiness = []; var aCommunity = []; var aEnvironment = []; var aMedia = []; var aAbout = []; var aCareers = []; var aDefault = []; this.iHighlighted = 0; // parameters object // this.oP = (param) ? param : {}; // defaults // if (!this.oP.minchars) this.oP.minchars = 0; 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 = 3000; if (!this.oP.delay) this.oP.delay = 100; if (!this.oP.offsety) this.oP.offsety = -5; if (!this.oP.shownoresults) this.oP.shownoresults = false; 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; } /**/ var legacyVal = "" _bsn.AutoSuggest.prototype.getSuggestions = function (val) { // if input stays the same, do nothing // if (val == this.sInput) if (init == true) { 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 // /*alert("char " + (val.length>=this.nInputChars)); alert("length " + this.aSuggestions.length); alert("cache " + this.oP.cache); alert("val.length>1 " + (val.length > 1) ); alert("init == false " + (init == false));*/ if ((val.length>=this.nInputChars) && this.aSuggestions.length && this.oP.cache && val.length > 1 && init == false) { //alert(val) var arr = []; var arHome = []; var arBusiness = []; var arCommunity = []; var arEnvironment = []; var arMedia = []; var arAbout = []; var arCareers = []; var arDefault = []; for (var i=0;i-1){ arr.push( this.aSuggestions[i] ); switch(this.aSuggestions[i].id.toLowerCase()){ case "home_services": arHome.push(this.aSuggestions[i]) break; case "business_services": arBusiness.push(this.aSuggestions[i]) break; case "community": arCommunity.push(this.aSuggestions[i]) break; case "environment": arEnvironment.push(this.aSuggestions[i]) break; case "media_centre": arMedia.push(this.aSuggestions[i]) break; case "about_us": arAbout.push(this.aSuggestions[i]) break; case "careers": arCareers.push(this.aSuggestions[i]) break; default: arDefault.push(this.aSuggestions[i]) break; } //} } this.sInput = val; this.nInputChars = val.length; this.aSuggestions = arr; // this.aHome = arHome; this.aBusiness = arBusiness; this.aCommunity = arCommunity; this.aEnvironment = arEnvironment; this.aMedia = arMedia; this.aAbout = arAbout; this.aCareers = arCareers; this.aDefault = arDefault; // this.createList(this.aSuggestions); return false; } else // do new request // { if (val.length >2){ init = false; this.sInput = val; this.nInputChars = val.length; var pointer = this; clearTimeout(this.ajID); this.ajID = setTimeout( function() { pointer.doAjaxRequest() }, this.oP.delay ); } else{ init = true; } return false; } } /**/ _bsn.AutoSuggest.prototype.doAjaxRequest = function () { var pointer = this; // create ajax request var url = this.oP.script+this.oP.varname+"="+escape(this.fld.value); var meth = this.oP.meth; var onSuccessFunc = function (req) { pointer.setSuggestions(req) }; var onErrorFunc = function (status) { alert("AJAX error: "+status); }; var myAjax = new _bsn.Ajax(); myAjax.makeRequest( url, meth, onSuccessFunc, onErrorFunc ); } /**/ /**/ _bsn.AutoSuggest.prototype.setSuggestions = function (req) { this.aSuggestions = []; var xml = req.responseXML; //var xmlText = req.responseText; //alert(xmlText); // traverse xml // if (xml.hasChildNodes()) { var results = xml.getElementsByTagName('results')[0].childNodes if(results.length <1){ return false; } for (var i=0;i=this.nInputChars) && this.aSuggestions.length && this.oP.cache && this.fld.value.length > 1 && init == false) this.getSuggestions(this.fld.value) } } /* Build the XHTML */ _bsn.AutoSuggest.prototype.createList = function(arr) { var pointer = this; if (arr.length>0) { // get rid of old list // and clear the list removal timeout // _bsn.DOM.removeElement(this.idAs); this.killTimeout(); // create holding div // var div = _bsn.DOM.createElement("div", {id:this.idAs, className:this.oP.className}); // create and populate ul // var ul = _bsn.DOM.createElement("ul", {id:"as_ul"}); // loop throught arr of suggestions // creating an LI element for each suggestion // /** New Sets ***/ //Home if (this.aHome.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Your home"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aHome[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aHome[i].noRes); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Business if (this.aBusiness.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Your business"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aBusiness[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aBusiness[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Community if (this.aCommunity.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Community"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aCommunity[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aCommunity[i].noRes); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Environment if (this.aEnvironment.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Environment"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aEnvironment[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aEnvironment[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Media if (this.aMedia.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Media"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aMedia[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aMedia[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //About if (this.aAbout.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "About us"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aAbout[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aAbout[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Careers if (this.aCareers.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Careers"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aCareers[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aCareers[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } //Other if (this.aDefault.length>0) { var heading = _bsn.DOM.createElement("h2", {}, "Other"); var hUl = _bsn.DOM.createElement("ul", {}); var hDiv = _bsn.DOM.createElement("div", {className:"section"}); for (var i=0;i" + val.substring(st, st+this.sInput.length) + "" + val.substring(st+this.sInput.length); } else{ var output = val; } var span = _bsn.DOM.createElement("span", {}, output, true); var a = _bsn.DOM.createElement("a", { href:this.aDefault[i].lnk }); var results = _bsn.DOM.createElement("span", {className:"res"} , "score: " + this.aDefault[i].noRes ); a.appendChild(span); a.name = i+1; a.onmouseover = function () { pointer.setHighlight(this.name); } var li = _bsn.DOM.createElement( "li", {}, a ); li.appendChild(results); hUl.appendChild( li ); } hDiv.appendChild( heading ); hDiv.appendChild( hUl ); div.appendChild( hDiv ) } // no results // if (arr.length == 0 || this.oP.shownoresults == false) { //var li = _bsn.DOM.createElement( "li", {className:"as_warning"}, this.oP.noresults ); //_bsn.DOM.removeElement(div) //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 +5) + "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); } else{ var pointer = this; pointer.clearSuggestions(); } } /**/ _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