Ajax imitation Google search dropdown hint

<script type="Text/javascript" src= "prototype.js"> </script>
<script type= "Text/javascript" >
DefinedvariableLastindex represents the position of the mouse to slide over the query result, initially-1
var lastindex=-1;
Define variable flag Indicates whether AJAX queries are based on keywords entered by the user, flase to allow query true to disallow queries
var Flag=false;
The length of the array generated by the returned query result
var listlength=0;
function StringBuffer () {//define object StringBuffer
this.data=[];//create attributes, custom strings
}
Stringbuffer.prototype.append=function () {//Declaration of StringBuffer methods
This.data.push (Arguments[0]); return this;//method implementation code, assigning value
}
Stringbuffer.prototype.tostring=function () {//Returns the result, or the output.
Return This.data.join ("");
}
String.prototype.Trim = function () {//Filter space
Return This.replace (/(^\s*) | ( \s*$)/g, "");
}
function HiddenSearch () {//Hide functions are mainly hidden display hints dropdown layer and IFRAME, about IFRAME underneath said its role
$ (' rlist '). style.display= "None";
$ (' rframe '). style.display= "None";
}
function Showsearch (num) {//display functions are mainly displayed with the hint Drop-down layer and the IFRAME parameter num, which controls the height of the hint layer and IFRAME according to this parameter
$ (' rlist '). style.display= ';
$ (' rframe '). style.display= ';
Here I define a tip height of 20px for each return query result, where the hint layer's total height is added num, because I used padding a pixel when I defined the style
$ (' rlist '). style.height=num*20+num+ ' px ';
Also locate the height of the iframe.
$ (' rframe '). style.height=num*20+num+ ' px ';
}
function GetPosition (element,offset) {
Returns the coordinate function of the text input box with the argument element as the object to return, parameter offset optionally offsetleft|offsettop as the absolute position of the object from the upper corner of the left window
Use this function to locate the hint level we want to display so that the hint layer is displayed correctly under the Text entry box
var c=0;
while (Element) {
C+=element[offset];
Element=element.offsetparent
}
return C;
}
/********************************dom*************************************************/
function CreateList () {//Create hint layer
var listdiv=document.createelement ("div");//createelement () method creates an element node
Listdiv.id= "Rlist"; Hint Layer ID
listdiv.style.zindex= "2"; the//z-index property sets the stacking order of the elements. Elements that have a higher stacking order are always in front of elements that have a lower stacking order, and this setting is followed by
listdiv.style.position= "Absolute"; The position attribute places the element in a static, relative, absolute, or fixed position. This corresponds to the bottom one, which is corresponding to the frame below, and the position is set to the absolute element, which can be positioned relative to the specified coordinates of the element containing it. The position of this element can be specified by "left", "Top", "right", and "bottom" properties. The bottom of the show is also because of the choice of this absolute value
listdiv.style.border= "solid 1px #000000";//Set Border style
Listdiv.style.backgroundcolor= "#FFFFFF";/Set Background color
Listdiv.style.display= "None"; This element will not be displayed
listdiv.style.width=$ (' keyword '). clientwidth+ "px";//Read-only property, declaring the width of the window's document display area
Listdiv.style.left=getposition ($ (' keyword '), ' offsetleft ') +1.5+ ' px '; set the left margin of the anchor element
ListDiv.style.top = (getposition (' keyword '), ' offsettop ') +$ (' keyword '). clientheight +3) + "px"; Sets the offset between the top and outer edges of a positioned element and the bounds on its containing block. Tip: If the value of the "position" property is static, setting the top property will have no effect.
var listframe=document.createelement ("iframe");
Listframe.id= "Rframe";//Hint layer ID
listframe.style.zindex= "1"; the//z-index property sets the stacking order of the elements. Elements that have a higher stacking order are always in front of an element with a lower stacking order, which is set to the front
listframe.style.position= "Absolute";//and the above setting is corresponding to the
listframe.style.border= "0";//Set border to 0
Listframe.style.display= "None"; This element will not be displayed
listframe.style.width=$ (' keyword '). clientwidth+ "px";//Read-only property, declaring the width of the window's document display area
Listframe.style.left=getposition ($ (' keyword '), ' offsetleft ') +1+ ' px '; set the left margin of the anchor element
ListFrame.style.top = (getposition (' keyword '), ' offsettop ') +$ (' keyword '). clientheight +3) + "px"; Sets the offset between the top and outer edges of a positioned element and the bounds on its containing block. Tip: If the value of the "position" property is static, setting the top property will have no effect.
Document.body.appendChild (LISTDIV); Adds a new child node to the end of the list of child nodes of the node. The end of the beginning echoes.
Document.body.appendChild (listframe);//Adds a new child node to the end of the node's child node list. The end of the beginning echoes.
}
function SetStyle (element,classname) {
Switch (classname) {
Case ' m ':
Element.style.fontsize= "12px";//Set Font size
Element.style.fontfamily= "Arial,sans-serif"; the//fontfamily property defines the font used for element text display.
Element.style.backgroundcolor= "#3366cc";/background
Element.style.color= "BLACK";//Color
element.style.width=$ (' keyword '). clientwidth-2+ "px";/set the width of the read-only property
Element.style.height= "20px";//Set height
element.style.padding= "1px 0px 0px 2px"; The//padding property sets the inner margin of the element.
if (element.displayspan) element.displayspan.style.color= "White"
Break
Case ' d ':
Element.style.fontsize= "12px";
Element.style.fontfamily= "Arial,sans-serif";
element.style.backgroundcolor= "White";
Element.style.color= "BLACK";
element.style.width=$ (' keyword '). clientwidth-2+ "px";
Element.style.height= "20px";
element.style.padding= "1px 0px 0px 2px";
if (element.displayspan) element.displayspan.style.color= "Green"
Break
Case ' t ':
Element.style.width= "80%";
if (Window.navigator.userAgent.toLowerCase (). IndexOf ("Firefox")!=-1) element.style.cssfloat= "left";
else element.style.stylefloat= "left";
Element.style.whitespace= "nowrap";
Element.style.overflow= "hidden";
element.style.textoverflow= "Ellipsis";
Element.style.fontsize= "12px";
Element.style.textalign= "left";
Break
Case ' H ':
Element.style.width= "20%";
if (Window.navigator.userAgent.toLowerCase (). IndexOf ("Firefox")!=-1) element.style.cssfloat= "right";
else element.style.stylefloat= "right";
Element.style.textalign= "Right";
Element.style.color= "Green";
Break
}
}
function Focusitem (index) {
if ($ (' item ' +lastindex)!=null) SetStyle ($ (' Item ' +lastindex), ' d ');
if ($ (' item ' +index)!=null) {
SetStyle ($ (' Item ' +index), ' m ');
Lastindex=index;
}
else {
$ ("keyword"). focus ();
}
}
function Searchclick (index) {
$ ("keyword"). value=$ (' title ' +index). InnerHTML;
Flag=true;
}
function Searchkeydown (e) {
if ($ (' rlist '). innerhtml== ') return;
var keycode= (window.navigator.appname== "Microsoft Internet Explorer")? Event.keycode:e.which;
Down
if (keycode==40)
{
if (lastindex==-1| | LASTINDEX==LISTLENGTH-1)
{
Focusitem (0);
Searchclick (0);
}
else{
Focusitem (lastindex+1);
Searchclick (lastindex+1);
}
}
if (keycode==38)
{
if (lastindex==-1)
{
Focusitem (0);
Searchclick (0);
}
else{
Focusitem (lastindex-1);
Searchclick (lastindex-1);
}
}
if (keycode==13)
{
Focusitem (lastindex);
$ ("keyword"). value=$ (' title ' +lastindex). innertext;
}
if (keycode==46| | keycode==8) {Flag=false;ajaxsearch ($F (' keyword '). substring (0, $F (' keyword '). length-1). Trim ());
}
Function Show Result(XMLHTTP)
{
var result=unescape (Xmlhttp.responsetext);
if (result!= ') {
var resultstring=new stringbuffer ();
var title=result.split (' $ ') [0];
var hits=result.split (' $ ') [1];
For (Var i=0;i<title.split (' | '). length;i++)
{
Resultstring.append (' <div id= ' item ' +i+ ' "> ');
Resultstring.append (' <span id=title ' +i+ ' > ');
Resultstring.append (title.split (' | ') [i]);
Resultstring.append (' </span> ');
Resultstring.append (' <span id=hits ' +i+ ' > ');
Resultstring.append (hits.split (' | ') [i]);
Resultstring.append (' </span> ');
Resultstring.append (' </div> ');
}
$ (' rlist '). innerhtml=resultstring.tostring ();
For (Var j=0;j<title.split (' | '). length;j++)
{
SetStyle ($ (' Item ' +j), ' d ');
$ (' item ' +j). displayspan=$ (' hits ' +j);
SetStyle ($ (' title ' +j), ' t ');
SetStyle ($ (' hits ' +j), ' H ');
}
Showsearch (title.split (' | '). length);
Listlength=title.split (' | '). Length
Lastindex=-1;
}
else HiddenSearch ();
}
function Ajaxsearch (value)
{
New Ajax.request (' search.php ', {method: "Get", Parameters: "action=do&keyword=" +escape (value), OnComplete: Showresult});
}
function Main ()
{
$ (' keyword '). classname=$ (' keyword '). classname== ' Inputblue '? ' Inputfocus ': ' Inputblue ';
if ($F (' keyword '). Trim () = = "") HiddenSearch ();
Else
{
if ($F (' keyword ')!= ' &&flag==false) ajaxsearch ($F (' keyword '). Trim ());
if (listlength!=0) $ (' keyword '). Onkeydown=searchkeydown;
else HiddenSearch ();
}
}
function OnInit ()
{
$ (' keyword '). autocomplete= "Off";
$ (' keyword '). Onfocus=main;
$ (' keyword '). Onkeyup=main;
$ (' keyword '). Onblur=hiddensearch;
CreateList ();
}
Event.observe (window, ' Load ', oninit);
</script>