function TypeAhead(pInputId){
//this.typeAheadServiceURL="http://"+window.location.host+"/shopping/srvc-type-ahead.php";
//this.typeAheadServiceURL="http://www.apache.fr/shopping/typeahead.php";
this.typeAheadServiceURL="http://"+location.host+"/shopping/typeahead.php";
this.inputId=pInputId;
this.inputElement=null;
this.suggestions=new Array();
this.suggestedText="";
this.userText="";
this.suggestionDropDown=null;
var suggestedIndex=0;
var isWaitingForSuggestions=false;
var self=this;
var HTTPReq;
var HTTPReqPost;
var pressedKeyCount=0;
var debugOutput=document.getElementById('debugOutput');
function debug(text){
if(typeof debugOutput !="undefined" && debugOutput)
debugOutput.innerHTML=debugOutput.innerHTML+"<br /><hr />"+text;
}
this.init=function(){
debug("TypeAhead Object Initialization");
if(window.ActiveXObject)
HTTPReq=new ActiveXObject("Microsoft.XMLHTTP");
else
HTTPReq=new XMLHttpRequest();
if (HTTPReq){
if(!self.inputElement && self.inputId) self.inputElement=document.getElementById(self.inputId);
if(self.inputElement){
self.suggestionDropDown=document.getElementById("THDropDown-"+self.inputId);
if(!self.suggestionDropDown){
self.suggestionDropDown=document.createElement('DIV');
self.suggestionDropDown.id="THDropDown-"+self.inputId;
self.suggestionDropDown.className="THHideDropDown";
self.suggestionDropDown=self.inputElement.parentNode.insertBefore(self.suggestionDropDown, self.inputElement.nextSibling);
self.suggestionDropDown.style.top="195px";
self.suggestionDropDown.style.left=self.inputElement.offsetLeft.toString()+"px";
self.suggestionDropDown.style.width=self.inputElement.offsetWidth.toString()+"px";
}
self.inputElement.onkeyup=function (evt){
if(!evt) evt=window.event;
switch(evt.keyCode){
case 8:
self.userText=self.inputElement.value;
suggestedIndex=0;
isWaitingForSuggestions=true;
self.getSuggestions();
return;
case 46:
self.userText=self.inputElement.value;
suggestedIndex=0;
isWaitingForSuggestions=true;
self.getSuggestions();
return;
case 40:
if(suggestedIndex<self.suggestions.length) suggestedIndex++;
self.suggest();
break;
case 38:
if(suggestedIndex>1) suggestedIndex --;
self.suggest();
break;
default:
pressedKeyCount--;
if (self.userText !=self.inputElement.value){
suggestedIndex=0;
self.userText=self.inputElement.value.toLowerCase();
self.suggest();
}
}
}
self.inputElement.onkeydown=function (evt){
if(!evt) evt=window.event;
if(evt.keyCode !=38 && evt.keyCode !=40 && evt.keyCode !=46 && evt.keyCode !=8)
pressedKeyCount++;
}
self.inputElement.onblur=function(evt){
window.setTimeout(function(){
self.suggestionDropDown.className=self.suggestionDropDown.className.replace("THShowDropDown","THHideDropDown");
},500);
}
}
}
}
this.getSuggestions=function(text){
if(text) self.userText=text;
if (self.userText.length>3){
HTTPReq.abort();
HTTPReq.onreadystatechange=self.populateSuggestions;
HTTPReq.open("GET", self.typeAheadServiceURL+"?inputid="+encodeURIComponent(self.inputId)+"&inputtxt="+encodeURIComponent(self.userText), true);
HTTPReq.send(null);
debug("request sent: "+"inputid="+encodeURIComponent(self.inputId)+"&inputtxt="+encodeURIComponent(self.userText));
}
}
this.addSuggestion=function(text){
if(text) self.userText=text;
if(HTTPReqPost) HTTPReqPost.abort();
if(window.ActiveXObject)
HTTPReqPost=new ActiveXObject("Microsoft.XMLHTTP");
else
HTTPReqPost=new XMLHttpRequest();
HTTPReqPost.onreadystatechange=self.populateSuggestions;
HTTPReqPost.open("POST", self.typeAheadServiceURL, true);
try{HTTPReqPost.setRequestHeader('Content-Type','application/x-www-form-urlencoded');}catch(e){};
HTTPReqPost.send("inputid="+encodeURIComponent(self.inputId)+"&inputtxt="+encodeURIComponent(self.userText));
debug("request posted: "+"inputid="+encodeURIComponent(self.inputId)+"&inputtxt="+encodeURIComponent(self.userText));
self.getSuggestions();
}
this.populateSuggestions=function(evt){
if (HTTPReq.readyState==4){
self.suggestions=HTTPReq.responseText.split("&");
debug("response: "+HTTPReq.responseText);
if(isWaitingForSuggestions) self.showSuggestionList();
}
}
this.suggest=function(text){
if(!HTTPReq) return;
if(text) self.userText=text;
if(self.userText=="") return;
self.suggestedText="";
if(suggestedIndex==0){
var newSuggestionArray=new Array();
for (var i=0;i<self.suggestions.length;i++){
if (self.suggestions[i].toLowerCase().indexOf(self.userText.toLowerCase())==0){
if(self.suggestedText=="")
self.suggestedText=self.suggestions[i];
newSuggestionArray[newSuggestionArray.length]=self.suggestions[i];
}else{
}
}
self.suggestions=newSuggestionArray;
}else{
self.suggestedText=self.suggestions[suggestedIndex-1];
}
if(self.suggestedText==""){
debug("loading more suggestions...");
isWaitingForSuggestions=true;
self.getSuggestions();
}
else{
isWaitingForSuggestions=false;
debug("suggestion: "+self.suggestedText);
if(pressedKeyCount==0){
var startIndex=self.inputElement.value.length;
self.inputElement.value=self.suggestedText;
this.selectText(startIndex, self.suggestedText.length);
}
self.showSuggestionList();
}
}
this.selectText=function(startIndex, nbChars){
if (self.inputElement.createTextRange){
var txtRange=self.inputElement.createTextRange();
txtRange.moveStart("character", startIndex);
txtRange.moveEnd("character", nbChars - self.inputElement.value.length);
txtRange.select();
}
else if (self.inputElement.setSelectionRange){
self.inputElement.setSelectionRange(startIndex, nbChars);
}
self.inputElement.focus();
}
this.showSuggestionList=function(){
var htmlList="";
for (var i=0;i<self.suggestions.length;i++){
if (self.suggestions[i].toLowerCase().indexOf(self.userText.toLowerCase())==0){
if(suggestedIndex-1==i)
htmlList+="<li class='THLIHover' onclick='document.getElementById(\""+self.inputId+"\").value=\""+self.suggestions[i]+"\"' onmouseover='this.className+=\" THLIHover\"' onmouseout='this.className=this.className.replace(\"THLIHover\",\"\")'>"+self.suggestions[i]+"</li>";
else
htmlList+="<li onclick='document.getElementById(\""+self.inputId+"\").value=\""+self.suggestions[i]+"\"' onmouseover='this.className+=\" THLIHover\"' onmouseout='this.className=this.className.replace(\"THLIHover\",\"\")'>"+self.suggestions[i]+"</li>";
}
}
var isHidden=false;
if(htmlList=="")
if(!isWaitingForSuggestions)
self.suggestionDropDown.innerHTML="Recherche des suggestions...";
else{
self.suggestionDropDown.innerHTML="";
self.suggestionDropDown.className=self.suggestionDropDown.className.replace("THShowDropDown","THHideDropDown");
isHidden=true
}
else
self.suggestionDropDown.innerHTML="<ul>"+htmlList+"</ul>";
if (!isHidden)
self.suggestionDropDown.className=self.suggestionDropDown.className.replace("THHideDropDown","THShowDropDown");
}
this.init();
}
var XBrowserAddHandler=function (target,eventName,handlerName){
if(!target) return;
if (target.addEventListener){
target.addEventListener(eventName, function(e){eval(handlerName)(e);}, false);
}else if (target.attachEvent){
target.attachEvent("on"+eventName, function(e){eval(handlerName)(e);});
}else{
var originalHandler=target["on"+eventName];
if (originalHandler){
target["on"+eventName]=function(e){originalHandler(e);eval(handlerName)(e);};
}else{
target["on"+eventName]=eval(handlerName);
}
}
}
var ta;
XBrowserAddHandler(window,'load', function(){ta=new TypeAhead('txtSearch')});