Summary of the implementation of Google suggest Technology Process

Under the guidance of ivony, I studied Google's Google suggest technology. Some achievements have been made, and its functions have basically been successfully implemented. The following is a summary of the process of creating the display effect control using Js.
Here I will first introduce the process of implementing the control. I will implement this process in several steps.

After txt1 is triggered, the keyboard event is first judged to determine the key value of the Press key. If the pressed key is the up or down key, the function catchkeyboard () is executed (); otherwise, go to the subject of the Creation layer and layer. We will first discuss the issue of creating a layer and a layer subject. To create a layer, we must first know its absolute position.

1. Obtain the absolute position of the created layer.

To obtain the location of the created layer, you must first obtain the location of txt1. Here, we define a function to obtain the position of txt1:

Function getposition (OBJ)

{
VaR Top = 0, Left = 0;

Do

{

Top + = obj. offsettop;

Left + = obj. offsetleft;

}

While (OBJ = obj. offsetparent );

VaR arr = new array ();

Arr [0] = top;

Arr [1] = left;

Return arr;

}

If the position of txt1 is (top, left), the layer attached to txt1 is (top + textbox. clientheight, left), and the width is the same as that of txt1.

2. Create a layer.

Knowing the location of the layer to be created, it is easy to create a layer.

Function createmenu (Textbox, menuid)

{

If (document. getelementbyid (menuid) = NULL)

{

VaR left_new = getposition (textbox) [1]

VaR top_new = getposition (textbox) [0];

VaR newcontrol = Document. createelement ("Div"); // create a Layer

Newcontrol. ID = menuid;

Document. Body. appendchild (newcontrol );

Newcontrol. style. Position = "absolute ";

Newcontrol. style. Border = "solid 1px #000000 ";

Newcontrol. style. backgroundcolor = "# ffffff ";

Newcontrol. style. width = textbox. clientwidth + "PX"; // absolute width

Newcontrol. style. Left = left_new + "PX"; // location

Newcontrol. style. Top = (top_new + textbox. clientheight + 2) + "PX"; // note that adding this height to 2 is to solve the unnatural factors in JS...

Return newcontrol;

}

Else

Return document. getelementbyid (menuid );

}

3. Create a subject at the Layer

The next step is the subject of the Creation layer. In order to display its effect, we first define some arrays to retrieve data from the array.

Define an array:

VaR arr1 = new array ("Alizee", "Westlife", "John", "blue", "colinton", "angle ");

VaR arr2 = new array ("letter orchestra", "F4", "twins", "she", "Hu Yanbin", "Jay Chou", "Liu ruoying", "Liu Dehua ", "angle", "orange", "green", "White", "Red", "blue ");

Define a function to take the value:

Function getsearchresult (key)

{

Switch (key)

{

Case "A": // when a is input, the data in arr1 is displayed.

Return arr1;

Case "S": // display the data in arr2 when entering S

Return arr2;

Default:

Return new array ();

}

}

After completing the above preparations, we can formally create the layer entity.

Function createmenubody (key)

{

VaR result = "";

VaR J = 0;

Arr = getsearchresult (key); // obtain the corresponding array

// Display up to 10 rows of data

If (ARR. length> 10)

{

J = 10;

}

Else

{

J = arr. length;

}

For (VAR I = 0; I <j; I ++) // create the subject of the cyclic Layer

Result + = "<Table border = \" 0 \ "cellpadding = \" 2 \ "cellspacing = \" 0 \ "id = \" menuitem "+ (I + 1) + "\" onmouseover = \ "forcemenuitem (" + (I + 1) + "); \ "width =" 100% \ "onclick = \" givnumber ("+ I + ") \ "> <tr> <TD align = \" Left \ ">" + arr [I] + "</TD> <TD align = \" right \ ">" + (I + 1) + "</TD> </tr> </table> ";

Return result;

}

4. Capture mouse events.

Objectively speaking, it should be the focus of the acquiring layer. When the subject obtains the focus, its color becomes highlighted. When you move the mouse over the subject, it obtains the focus to highlight the subject. Think from another angle, and the event becomes highlighted, which can also be seen as triggered by the mouse.

Therefore, the onmouseover event is used to trigger the forcemenuitem (INDEX) function ).

First define a variable VAR menufocusindex; it stores the value of the previous highlighted subject. When a mouse event is triggered, we turn the previous highlighted body into white, and change the currently triggered body into blue, which solves this problem. The Code is as follows:

Lastmenuitem = Document. getelementbyid ("menuitem" + menufocusindex)

If (lastmenuitem! = NULL)

{

// Whitelist the previous one

Lastmenuitem. style. backgroundcolor = "white ";

Lastmenuitem. style. color = "#000000 ";

}

VaR menuitem = Document. getelementbyid ("menuitem" + index );

If (menuitem = NULL)

{

Document. getelementbyid ("txt1"). Focus ();

}

Else

{

Menuitem. style. backgroundcolor = "# 5555cc ";

Menuitem. style. color = "# ffffff ";

Menufocusindex = index;

}

5. Capture up/down key events

Next we will solve the problem of capturing up and down keys. Here, it is confusing that the event is triggered by txt1, rather than by the layer entity. In fact, I have also taken many detours in the implementation process.

As I mentioned above, when txt1 is triggered, it is judged. If it is an up or down key, it is converted to the catchkeyboard () function (). Instead of creating a layer. In this function, we can also call the mouse event function (specifically, call the function to obtain the focus ).

VaR keynumber = event. keycode;

If (keynumber = '40') // downward

{

If (menufocusindex = 10)

Return true;

Else if (menufocusindex = NULL) // when the focus is in the middle of the text box, jump down to the first subject.

{

Forcemenuitem (1 );

Givnumber (0 );

}

Else

{

Forcemenuitem (menufocusindex + 1); // increase the focus by 1.

Givnumber (menuFocusIndex-1 );

}

 

}

Else if (keynumber = '38') // up

{

If (menufocusindex = 1)

{

Forcemenuitem (menuFocusIndex-1); // when the focus is on the first body, press up to bring it back to the text box.

}

Else

{

Forcemenuitem (menuFocusIndex-1); // focus reduced by 1

Givnumber (menuFocusIndex-1 );

}

}

6. Press the up or down key to assign the corresponding value to the text box.

Note the value of the current array defined when the subject of the layer is created. It is easy to complete this function.

Function givnumber (INDEX)

{

Document. getelementbyid ("txt1"). value = arr [Index];

Document. getelementbyid ("txt1"). Focus ();

}

Here, the main body of the control is basically complete, run, enter a and S in the text box respectively, you can find that it is the same effect as Google suggest. Of course, Ajax technology will be used for asynchronous callback. When the query value is input, the query value is returned from the database in the background to form an array. Of course, I will not talk about these simple steps here. So far, Google suggest technology has been fully implemented.