How DWR simulates Google search results and code

Source: Internet
Author: User
Tags keyword list

Copy codeThe Code is as follows: <! -- Simulate google search -->
<Script type = "text/javascript">
/******************************** Configurable options **** ****************************/
// Selected background color of similar keywords
Var selectedBgColor = "# CCCCCC ";
// Background color of unselected similar keywords
Var unselectedBgColor = "# FFFFFF ";
// Border of the list box with similar keywords
Var listBorder = "1 solid #000000 ";
/*************************************** ************************************/
/********************************* Unconfigurable options **** ****************************/
// The keyword entered last time (used to determine whether the keyword has changed, if not, it will not go to the server to obtain the prompt keyword again)
Var oldKeyValue;
// Position of the mouse relative to the prompt keyword list box (0: Outside the prompt box, 1: Inside the prompt box)
Var mouseLocation = 0;
// The currently selected prompt keyword index (starts from 0 and is equal to-1, indicating that no selected item is selected)
Var selectedKeyIndex =-1;
// The last selected prompt keyword index (starts from 0 and is equal to-1, indicating that the last selected item has not been selected)
Var oldSelectedKeyIndex =-1;
// Total number of prompt keywords
Var tdCount = 0;
/*************************************** ************************************/
/*
Purpose: add the Remove left and right spaces Method to the String object.
*/
String. prototype. trim = function (){
Var m = this. match (/^ \ s * (\ S + (\ s + \ S +) *) \ s * $ /);
Return (m = null )? "": M [1];
}
/*
Purpose: Initialize the status of the keyword list box.
*/
Function initKeyListState (){
SelectedKeyIndex =-1;
OldSelectedKeyIndex =-1;
TdCount = 0;
}
/*
Purpose: change the last selected keyword to unselected
*/
Function disSelectedOldKey (){
// Judgment Description: oldSelectedKeyIndex! = SelectedKeyIndex
// When there is only one similar keyword, the last and current selected keywords do not exist,
// Once selected for the first time, the up or down arrow is selected.
If (oldSelectedKeyIndex! =-1 & oldSelectedKeyIndex! = SelectedKeyIndex ){
$ ('Keyid' + oldSelectedKeyIndex). bgColor = unselectedBgColor;
}
// Update the last selected item
OldSelectedKeyIndex = selectedKeyIndex;
}
/*
Purpose: When you press the up or down arrow, select the new prompt keyword and press enter to enter the selected prompt keyword in the search box.
*/
Function setSelectedKey (){
// $ ('Keyid0') indicates that the keyword is displayed. If the keyword does not exist, it is not processed.
If ($ ('keyid0 ')){
If (event. keyCode = 38 ){
// ------ Handle upstream events ------
If (selectedKeyIndex =-1 ){
SelectedKeyIndex = tdCount-1;
} Else {
SelectedKeyIndex = (selectedKeyIndex + tdCount-1) % tdCount;
}
$ ('Keyid' + selectedKeyIndex). bgColor = selectedBgColor;
DisSelectedOldKey ();
} Else if (event. keyCode = 40 ){
// ------ Process downstream events ------
If (selectedKeyIndex =-1 ){
SelectedKeyIndex = 0;
} Else {
SelectedKeyIndex = (selectedKeyIndex + 1) % tdCount;
}
$ ('Keyid' + selectedKeyIndex). bgColor = selectedBgColor;
DisSelectedOldKey ();
} Else if (event. keyCode = 13 ){
// ------ Handle the carriage return event ------
$ ('Cond'). value = $ ('keyid' + selectedKeyIndex). innerText;
SetCursorLast ($ ('cond '));
// Hide the prompt keyword list box
$ ('Dropdownlistdiv '). style. display = 'none ';
}
}
}
/*
Purpose: obtain similar keywords.
*/
Function getConformKey (){
// Obtain the entered keyword
Var keyValue = $ ('cond'). value. trim ();
// If the query keyword is the same as that of the previous query, you do not need to go to the server to obtain a list of similar keywords again.
If (keyValue! = OldKeyValue ){
// If the keyword is null, the system does not go to the server to obtain a list of similar keywords.
If (keyValue = ''){
DWRUtil. removeAllRows ('showkeylist ');
SetDropListVisible (false );
InitKeyListState ();
} Else {
// Obtain similar keywords in ajax asynchronous mode (replace useraction with your own action)
Useraction. findByLike (keyValue, conformKeyCallback );
}
}
}
/*
Purpose: Obtain the keyword callback method.
*/
Function conformKeyCallback (keyList ){
DWRUtil. removeAllRows ('showkeylist ');
InitKeyListState ();
If (keyList. length> 0 ){
// Generate a prompt box for similar keywords
DWRUtil. addRows ('showkeylist', keyList, cellFuncs ,{
CellCreator: function (options ){
Var td = document. createElement ("td ");
Td. id = 'keyid' + tdCount ++;
Td. onmouseover = function () {selectedKeyIndex = parseInt (this. id. substring (5, td. id. length); this. bgColor = selectedBgColor; disSelectedOldKey ();};
Td. onclick = function (){
$ ('Cond'). value = this. innerText;
$ ('Cond'). focus ();
SetCursorLast ($ ('cond '));
$ ('Dropdownlistdiv '). style. display = 'none ';
};
Return td;
}, EscapeHtml: false });
SetDropListVisible (true );
} Else {
SetDropListVisible (false );
}
}
/*
Purpose: display table data
*/
Var cellFuncs = [
Function (data) {return data. username ;}
];
/*
Purpose: move the cursor of the input box to the end
*/
Function setCursorLast (inputObj ){
Var inputRange = inputObj. createTextRange ();
InputRange. collapse (true );
InputRange. moveStart ('character ', inputObj. value. length );
InputRange. select ();
}
/*
Purpose: create a similar keyword list box
*/
Function createShowDiv (){
Var showDiv = document. createElement ("div ");
ShowDiv. id = "dropdownlistDiv ";
With (showDiv. style ){
Position = "absolute ";
// Adjust the absolute position of the layer from this
Left = parseInt ($ ('cond'). style. left. replace ('px ', '') + 190;
Top = parseInt ($ ('cond '). style. top. replace ('px ', '') + parseInt ($ ('cond '). style. height. replace ('px ', '') + 28;
Width = parseInt ($ ('cond'). style. width. replace ('px ',''));
Border = listBorder;
ZIndex = "1 ";
Display = 'none ';
BackgroundColor = unselectedBgColor;
}
ShowDiv. onmouseover = function () {mouseLocation = 1 ;};
ShowDiv. onmouseout = function () {mouseLocation = 0 ;};
// Configure the scroll bar for overflow
ShowDiv. innerHTML = "<div style = 'width: 100%; height: 150px; overflow: auto; '> <table border = '0' style = 'width: 100%; height: 20%; font-size: 12; color: #33CC00; '> <tbody id = 'showkeylist' style = 'margin-left: 0; margin-right: 0; margin-bottom: 0; margin-top: 0; '> </tbody> </table> </div> ";
Document. body. appendChild (showDiv );
InitKeyListState ();
}
/*
Purpose: Set whether the list of similar keywords is visible.
Parameter: isDisplay; true indicates visible; false indicates invisible
*/
Function setDropListVisible (isDisplay ){
If (mouseLocation = 1 ){
Return;
}
If ($ ('cond'). value. trim ()! = '') & (IsDisplay = true )){
$ ('Dropdownlistdiv '). style. display = '';
}
Else {
$ ('Dropdownlistdiv '). style. display = 'none ';
}
}
// Append the method for creating a list box with similar keywords to the onload event
If (window. addEventListener ){
Window. addEventListener ('load', createShowDiv, false );
} Else if (window. attachEvent ){
Window. attachEvent ('onload', createShowDiv );
}
</Script>

This js file can be stored in the jsp file you need to implement search results, or saved as a js file separately.Copy codeThe Code is as follows: <div style = "position: absolute; left: pixel PX; top: 25px;">
<Input AUTOCOMPLETE = "off"
Onkeydown = "oldKeyValue = this. value. trim (); setSelectedKey ();"
Onkeyup = "getConformKey ();"
Onfocus = "if (this. value = 'Find someone ') this. value =''; setDropListVisible (true );"
Onblur = "setDropListVisible (false );"
Style = "width: 300; height: 23; z-index: 10; top: 0; left: 0; "type =" text "name =" cond "value =" Find someone "id =" cond "/>
<Input type = "button" class = "btn" value = "Search" onclick = "findBylike ();"/>
</Div>

Useraction. findByLike (String name); is a query method at the dao layer,
Return a List and replace it with your own implementation.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.