dwr实现GoogleSuggest 修改bug版

旭龙 2011-05-20

展开全文

网上有个版本dwr实现GoogleSuggest的,我下下来有很多问题,自己修改了其中的错误bug,以下是修改后的版本

dwr的自己设置吧,只要是返回一个list<String>类型的就行

/************** autosuggest.js ************/
function AutoSuggestControl(oTextbox /*:HTMLInputElement*/) {
this.cur /*:int*/= -1;
this.layer = null;
this.textbox /*:HTMLInputElement*/= oTextbox;
this.init();

this.requestSuggestions = function(oAutoSuggestControl /*:AutoSuggestControl*/) {
  var sSuggestValue = oAutoSuggestControl.textbox.value;
  if(sSuggestValue!='') {
   sSuggestValue.replace(/'/g,"");//过滤掉输入法输入汉字时输入的 '
   DwrService.getAutoSuggest(sSuggestValue, function(list) {
    oAutoSuggestControl.autosuggest(list);
   });
  }
  else{
   this.hideSuggestions();
  }
};
}

AutoSuggestControl.prototype.autosuggest = function(aSuggestions /*:Array*/) {

//make sure there's at least one suggestion
if (aSuggestions.length > 0) {
this.showSuggestions(aSuggestions);
} else {
this.hideSuggestions();
}
};

/**
* Creates the dropdown layer to display multiple suggestions.
* @scope private
*/
AutoSuggestControl.prototype.createDropDown = function() {
var oThis = this;
//create the layer and assign styles
this.layer = document.createElement("div");
this.layer.className = "suggestions";
this.layer.style.visibility = "hidden";
this.layer.style.width = this.textbox.offsetWidth;

//when the user clicks on the a suggestion, get the text (innerHTML)
//and place it into a textbox
this.layer.onmousedown = this.layer.onmouseup = this.layer.onmouseover = function(
   oEvent) {
  oEvent = oEvent || window.event;
  oTarget = oEvent.target || oEvent.srcElement;

  if (oEvent.type == "mousedown") {
   oThis.textbox.value = oTarget.firstChild.nodeValue;
   oThis.hideSuggestions();
  } else if (oEvent.type == "mouseover") {
   oThis.highlightSuggestion(oTarget);
  } else {
   oThis.textbox.focus();
  }
};

document.body.appendChild(this.layer);
};

AutoSuggestControl.prototype.getLeft = function() /*:int*/{

var oNode = this.textbox;
var iLeft = 0;

while (oNode.tagName != "BODY") {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}

return iLeft;
};

AutoSuggestControl.prototype.getTop = function() /*:int*/{

var oNode = this.textbox;
var iTop = 0;

while (oNode.tagName != "BODY") {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}

return iTop;
};

AutoSuggestControl.prototype.handleKeyDown = function(oEvent /*:Event*/) {
switch (oEvent.keyCode) {
case 38: //up arrow
  //this.requestSuggestions(this);
  this.previousSuggestion();
  break;
case 40: //down arrow
  if(this.layer.style.visibility=="hidden")
   this.requestSuggestions(this);
  this.nextSuggestion();
  break;
case 13: //enter
  this.hideSuggestions();
  break;
}
};

AutoSuggestControl.prototype.handleKeyUp = function(oEvent /*:Event*/) {
var iKeyCode = oEvent.keyCode;
//make sure not to interfere with non-character keys
if ((iKeyCode != 8 && iKeyCode < 32) || (iKeyCode >= 33 && iKeyCode < 46)|| (iKeyCode >= 112 && iKeyCode <= 123)) {

} else{
//request suggestions from the suggestion provider with typeahead
this.requestSuggestions(this);
}
};

AutoSuggestControl.prototype.hideSuggestions = function () {
this.layer.style.visibility = "hidden";
};

AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {
for (var i=0; i < this.layer.childNodes.length; i++) {
  var oNode = this.layer.childNodes[i];
  if (oNode == oSuggestionNode) {
  oNode.className = "current"
  } else if (oNode.className == "current") {
  oNode.className = "";
  }
}
};

AutoSuggestControl.prototype.init = function () {
//save a reference to this object
var oThis = this;

//assign the onkeyup event handler
this.textbox.onkeyup = function (oEvent) {
  //check for the proper location of the event object
  if (!oEvent) {
  oEvent = window.event;
  }
  //call the handleKeyUp() method with the event object
  oThis.handleKeyUp(oEvent);
  };

//assign onkeydown event handler
this.textbox.onkeydown = function (oEvent) {
  //check for the proper location of the event object
  if (!oEvent) {
  oEvent = window.event;
  }
//call the handleKeyDown() method with the event object
oThis.handleKeyDown(oEvent);
};

//assign onblur event handler (hides suggestions)
this.textbox.onblur = function () {
oThis.hideSuggestions();
};

//create the suggestions dropdown
this.createDropDown();
};

AutoSuggestControl.prototype.nextSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur <= cSuggestionNodes.length-1) {
if(this.cur != cSuggestionNodes.length-1){
++this.cur;
}
var oNode = cSuggestionNodes[this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
//dwr.util.setValue("tel", oNode.getAttribute("tel"));
}
};

AutoSuggestControl.prototype.previousSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur >= 0) {
if(this.cur != 0){
--this.cur;
}
var oNode = cSuggestionNodes[this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
//dwr.util.setValue("tel", oNode.getAttribute("tel"));
}
};

AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/) {

var oDiv = null;
this.layer.innerHTML = ""; //clear contents of the layer

var word;
for (var i=0; i < aSuggestions.length; i++) {
word = aSuggestions[i];
oDiv = document.createElement("div");
oDiv.appendChild(document.createTextNode(word));
//oDiv.setAttribute("tel",user.tel);
this.layer.appendChild(oDiv);
}

this.layer.style.left = this.getLeft() + "px";
this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
this.layer.style.visibility = "visible";

var oIFrame = document.createElement("iframe");
oIFrame.src = "javascript:false";
oIFrame.style.position = "absolute";
oIFrame.style.visibility = "inherit";
oIFrame.style.top = "0px";
oIFrame.style.left = "0px";

oIFrame.style.width = this.textbox.offsetWidth + "px";
oIFrame.style.height = this.layer.offsetHeight + "px";
oIFrame.style.zIndex = "-1";
oIFrame.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
this.layer.appendChild(oIFrame);

};

/************** layout.css************/

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#header { height:60px; background:#6cf; margin-bottom:5px;}
#searchStatus { height:30px; background:#09c; margin-bottom:5px;}
#mainContent { height:1024px; margin-bottom:5px;}
#leftbar { float:left; width:198px; height:auto; background:#9ff;}
#content { float:center; width:100%;margin:10px;height:auto; background:#cff;}/*??????????????????????????????Ч????ie 3????bug*/
#footer { height:60px; background:#6cf;}

/************** 页面************/