<!--analog Google search-->
<script type= "Text/javascript" >
/******************************** Configurable Options ********************************/
Selected similar keyword background color
var selectedbgcolor = "#CCCCCC";
Background color for similar keywords not selected
var unselectedbgcolor = "#FFFFFF";
Border of a similar keyword list box
var listborder = "1 solid #000000";
/***************************************************************************/
/******************************** not configurable option ********************************/
The last input keyword (used to determine if the keyword has changed, no longer go to the server to retrieve the prompt keyword)
var Oldkeyvalue;
Mouse position relative to the Prompt keyword list box (0: Outside of the Hint box, 1: Inside the hint box)
var mouselocation = 0;
The currently selected prompt keyword index (starting with 0, equal to 1 means that no item is selected)
var selectedkeyindex =-1;
Last selected prompt keyword index (0, equal to 1 indicates no last selected item)
var oldselectedkeyindex =-1;
Total number of Tip keywords
var tdcount = 0;
/***************************************************************************/
/*
Purpose: Add a method to remove the left and right spaces for a 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 Prompt keyword list box
*/
function Initkeyliststate () {
Selectedkeyindex =-1;
Oldselectedkeyindex =-1;
Tdcount = 0;
}
/*
Purpose: Changes the last selected key item to unchecked
*/
function Disselectedoldkey () {
Judgment Note: Oldselectedkeyindex!=selectedkeyindex
When there is only one similar keyword, there is no last check and this check keyword.
The up or down arrows are selected as long as the first check is selected.
if (Oldselectedkeyindex!=-1&&oldselectedkeyindex!=selectedkeyindex) {
$ (' keyID ' + oldselectedkeyindex). Bgcolor=unselectedbgcolor;
}
Last checked Item update
Oldselectedkeyindex = Selectedkeyindex;
}
/*
Usage: When pressing the up and down arrows, select the new prompt key entry and press ENTER to enter the selected prompt keyword into the search box.
*/
function Setselectedkey () {
$ (' keyId0 ') exists to indicate a related hint keyword, does not exist, does not process.
if ($ (' keyId0 ')) {
if (event.keycode==38) {
------Handle UP events------
if (selectedkeyindex==-1) {
Selectedkeyindex = tdCount-1;
}else{
selectedkeyindex= (selectedkeyindex+tdcount-1)%tdcount;
}
$ (' keyID ' + selectedkeyindex). bgcolor= Selectedbgcolor;
Disselectedoldkey ();
}else if (event.keycode==40) {
------Handle the Downward event------
if (selectedkeyindex==-1) {
Selectedkeyindex = 0;
}else{
Selectedkeyindex = (selectedkeyindex+1)%tdcount;
}
$ (' keyID ' + selectedkeyindex). bgcolor= Selectedbgcolor;
Disselectedoldkey ();
}else if (event.keycode==13) {
------Handle Carriage Return events------
$ (' cond '). value=$ (' keyID ' + selectedkeyindex). innertext;
Setcursorlast ($ (' cond '));
Hide Tip keyword list box
$ (' Dropdownlistdiv '). style.display= ' None ';
}
}
}
/*
Use: Get similar keywords
*/
function Getconformkey () {
Get the input keyword
var keyvalue = $ (' cond '). Value.trim ();
If the query keyword is the same as last time, the server will not retrieve a similar list of keywords.
if (Keyvalue!=oldkeyvalue) {
If the keyword is empty, do not go to the server to get a similar list of keywords
if (keyvalue== ') {
Dwrutil.removeallrows (' showkeylist ');
Setdroplistvisible (FALSE);
Initkeyliststate ();
}else{
Use Ajax asynchronous mode to get similar keywords (useraction here, change to own action)
Useraction.findbylike (Keyvalue,conformkeycallback);
}
}
}
/*
Purpose: Get keyword callback method
*/
function Conformkeycallback (keylist) {
Dwrutil.removeallrows (' showkeylist ');
Initkeyliststate ();
if (keylist.length>0) {
Generate a similar keyword prompt box
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);
}
}
/*
Use: Table data Display processing method
*/
var Cellfuncs = [
function (data) {return data.username;}
];
/*
Purpose: Moves the cursor of the input box to the last
*/
function Setcursorlast (inputobj) {
var inputrange = Inputobj.createtextrange ();
Inputrange.collapse (TRUE);
Inputrange.movestart (' character ', inputObj.value.length);
Inputrange.select ();
}
/*
Purpose: Create similar keyword list box
*/
function Createshowdiv () {
var showdiv = document.createelement ("div");
Showdiv.id = "Dropdownlistdiv";
With (Showdiv.style) {
Position = "absolute";
The absolute position of the layer from this adjustment
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;};
Overflow set scroll bar
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: To set whether a similar keyword list box is visible
Parameters: Isdisplay,true represents 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 ';
}
}
Attach the Create similar keyword list box method to the OnLoad event
if (Window.addeventlistener) {
Window.addeventlistener (' Load ', Createshowdiv, false);
}else if (window.attachevent) {
Window.attachevent (' onload ', createshowdiv);
}
</script>
This JS can be placed in the JSP you need to implement search results, or save it as a JS file can be individually.
Useraction.findbylike (String name); is a query method for the DAO layer.
Return to a list and replace it with your own implementation.
