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.
