jquery Simulation class Search box automatically completes the Search prompt function (improved) _jquery

Autopoint.js Code:

Copy Code code as follows:

/*
* @date: 2010-5-22 21:42:15
* @author: Hu Lingwei
* Depends:
* Jquery.js
*
* Function: Similar to google search box tips
*/
(function ($) {
$.fn.autopoint = function (options) {
Defaults = {
Url:options.url,
keyleft:37,//Left Direction key
keyup:38,//Up ARROW key
keyright:39,//RIGHT ARROW key
keydown:40,//DOWN ARROW key
keyenter:13,//Enter
Listhovercss: ' Jhover ',//Cue box list mouse hover style
TPL: ' <div class= ' list ><div class= ' word ' >{word}</div><div class= ' view ' > About {view} record </div ></div> ',
topoffset:options.topoffset| | 5
};
var options = $.extend (defaults, options);
var dropdiv = $ (' <div></div> '). addclass (' Dropdiv '). Appendto (' body ');
var isover = false;
Dropdiv.hover (function () {
Isover = true;
}, function () {
Isover = false;
});
Return This.each (function () {
var PA = $ (this);
$ (this). bind (' KeyDown ', function (event) {
if (dropdiv.css (' Display ')!= ' none ') {//The keyboard event is handled when the hint layer is displayed
var currentlist = Dropdiv.find ('. ' + options.listhovercss);
if (Event.keycode = = Options.keydown) {//If the DOWN ARROW key is pressed
if (Currentlist.length = = 0) {
If none of the prompt lists is selected, the list is first selected
$ (this). Val (Getpointword dropdiv.find ('. List:first ')
. MouseOver ());
else if (Currentlist.next (). Length = = 0) {
If the last one is selected, uncheck to see that the input box is selected
Unhoverall ();
} else {
Unhoverall ();
Select the next column of the previously selected column
if (Currentlist.next (). length!= 0)
$ (this). Val (Getpointword (Currentlist.next) ()
. MouseOver ());
}
return false;
else if (Event.keycode = = Options.keyup) {//If the UP ARROW key is pressed
if (Currentlist.length = = 0) {
$ (this). Val (Getpointword dropdiv.find ('. List:last ')
. MouseOver ());
else if (Currentlist.prev (). Length = = 0) {
Unhoverall ();
} else {
Unhoverall ();
if (Currentlist.prev (). length!= 0)
$ (this). Val (Getpointword (Currentlist.prev) ()
. MouseOver ());
}
return false;
}else if (Event.keycode = = Options.keyenter) dropdiv.empty (). Hide ();
}
Record the input box value before pressing the key to make it easier to see if the key bounce time has changed
$ (this). attr (' Alt ', $ (this). Val ());
}. Bind (' KeyUp ', function (event) {
If the bouncing key is up or down the arrow key returns
if (Event.keycode = = options.keydown| | Event.keycode = = Options.keyup) return;
if ($ (this). val () = = ') {
Dropdiv.empty (). Hide ();
Return
}
Returns if the value of the input box does not change or becomes empty
if ($ (this). val () = $ (this). attr (' Alt '))
Return
GetData (PA, $ (this). Val ());
}. Bind (' blur ', function () {
if (Isover&&dropdiv.find ('. ' + options.listhovercss)!=0) return;
Empty and hide the cue layer when the text input box loses focus
Dropdiv.empty (). Hide ();
});
/** processing Ajax return Success **/
Handleresponse = function (parent, JSON) {
var isempty = true;
for (Var o in json) {
if (o = = ' data ') IsEmpty = false;
}
if (IsEmpty) {
ShowError ("Return data format error, please check the request URL is correct!");
Return
}
if (json[' data '].length = = 0) {
Return data is empty
Return
}
Refreshdropdiv (parent, JSON);
Dropdiv.show ();
}
/** ways to handle AJAX failures **/
HandleError = function (Error) {
ShowError ("failed due to URL error or timeout request!");
}
ShowError = function (Error) {
alert (error);
}
/** returns JSON format data via Ajax the string used to create the DOM **/
Render = function (parent, JSON) {
var res = json[' data '] | | Json
var appendstr = ';
Matches the contents of the/\{([a-z]+) \}/ig in the content substitution template string in the JSON object, such as {Word},{view}
for (var i = 0; i < res.length; i+=1) {
Appendstr + = Options.tpl.replace (/\{([a-z]+) \}/ig, function (m, n) {
return res[i][n];
});
}
Jebind (parent, APPENDSTR);
}
/** inserts a new DOM object into the prompt box and rebind mouseover event listener **/
Jebind = function (parent, a) {
Dropdiv.append (a);
Dropdiv.find ('. List '). each (function () {
$ (this). Unbind (' MouseOver '). MouseOver (function () {
Unhoverall ();
$ (this). addclass (OPTIONS.LISTHOVERCSS);
}). Unbind (' click '). Click (function () {
Parent.val (Getpointword (this));
Dropdiv.empty (). Hide ();
Parent.focus ();
});
});
}
/** the hover style of all columns in the Prompt box **/
Unhoverall = function () {
Dropdiv.find ('. List '). each (function () {
$ (this). Removeclass (OPTIONS.LISTHOVERCSS);
});
}
/** in the prompt box to get the currently selected prompt keyword **/
Getpointword = function (p) {
Return P.find (' Div:first '). Text ()
}
/** Refresh the Prompt box and set the style **/
Refreshdropdiv = function (parent, JSON) {
var left = Parent.offset (). Left;
var height = parent.height ();
var top = Parent.offset (), top + options.topoffset + height;
var width = Options.width | | Parent.width () + ' px ';
Dropdiv.empty ();
Dropdiv.css ({
' Border ': ' 1px solid #FE00DF ',
' Left ': left,
"Top": Top,
' Width ': width
});
Render (parent, JSON);
Prevent the input box from losing focus before Ajax returns, causing the prompt to not disappear
Parent.focus ();
}
/** requests data from the server via Ajax **/
GetData = function (parent, word) {
$.ajax ({
Type: ' Get ',
Data: "word=" + Word,
Url:options.url,
DataType: ' JSON ',
timeout:1000,
Success:function (JSON) {handleresponse (parent, JSON);
Error:handleerror
});
}
});
}
}) (JQuery);

Main styles on Web pages:

Copy Code code as follows:

<style type= "Text/css" >
. dropdiv {
Position:absolute;
Z-index:10;
Display:none;
Cursor:hand;
}
. dropdiv. jhover {
Background-color: #00FEDF;
}
. dropdiv. List {
Float:left;
width:100%;
}
. dropdiv. Word {
Float:left;
}
. dropdiv. View {
Float:right;
Color:gray;
Text-align:right;
font-size:10pt;
}
</style>

Call Method:

Copy Code code as follows:

<script type= "Text/javascript" src= ". /js/jquery-1.4.2.min.js "></script>
<script type= "Text/javascript" src= ". /js/autopoint-1.0.1.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ ("input"). Autopoint ({url: ' http://localhost/xun/ajax.svl?method=getsearchhelp '});
});
</script>
<body>
<input type= "text" size= "a"/>
<input type= "text" size= "a"/>
</body>

Main part of the servlet:

Copy Code code as follows:

Response.setcontenttype ("text/html");
Response.setheader ("Cache-control", "No-cache");
Response.setcharacterencoding ("UTF-8");
String Word = request.getparameter ("word");
if (Utils.isblank (word)) return;
Jsonobject json = new Jsonobject ();
Jsonarray array = new Jsonarray ();
map<string, object> map1 = new hashmap<string, object> ();
Map1.put ("word", Word + "A1");
Map1.put ("View", 10);
map<string, object> map2 = new hashmap<string, object> ();
Map2.put ("word", Word + "A2");
Map2.put ("View", 15);
map<string, object> map3 = new hashmap<string, object> ();
Map3.put ("word", Word + "A3");
Map3.put ("View", 2);
Array.add (Jsonobject.fromobject (MAP1));
Array.add (Jsonobject.fromobject (MAP2));
Array.add (Jsonobject.fromobject (MAP3));
Json.put ("Data", array);
PrintWriter out = Response.getwriter ();
Out.print (Json.tostring ());
Out.close ();

Where the Jsonobject and Jsonarray classes come from the Json-lib.jar, in order to test conveniently, are directly returned data, the actual application can be replaced by
Check data from the data source.