Supports multiple input boxes! You can only support one input box because the information of multiple input boxes is not easy to save. Now, you can use the alt attribute of the input box to save the content before modification. Therefore, you can support multiple input boxes. no problem found in the preliminary test. You are welcome to test and improve it !!! Autopoint. js code:
The Code is as follows:
/*
* @ Date: 21:42:15
* @ Author: Hu lingwei
* Depends:
* Jquery. js
*
* Function: similar to the GOOGLE search box prompt function
*/
(Function ($ ){
$. Fn. autopoint = function (options ){
Defaults = {
Url: options. url,
KeyLeft: 37, // left direction key
KeyUp: 38, // up arrow key
KeyRight: 39, // right direction key
KeyDown: 40, // downward direction key
KeyEnter: 13, // enter key
ListHoverCSS: 'jhover ', // a list of mouse hover styles in the prompt box
Tpl :'
{Word}
About {view} records
',
Topoffset: options. topoffset | 5
};
Var options = $. extend (defaults, options );
Var dropDiv = $ ('
'). AddClass ('dropdiv'). appendTo ('body ');
Var isOver = false;
DropDiv. hover (function (){
IsOver = true;
}, Function (){
IsOver = false;
});
Return this. each (function (){
Var pa = $ (this );
$ (This). bind ('keylow', function (event ){
If (dropDiv.css ('display ')! = 'None') {// handle keyboard events only when the prompt layer is displayed.
Var currentList = dropDiv. find ('.' + options. listHoverCSS );
If (event. keyCode = options. keyDown) {// if you press the downward arrow key
If (currentList. length = 0 ){
// If no one in the prompt list is selected, select the first one in the list.
$ (This). val (getPointWord (dropDiv. find ('. list: first ')
. Mouseover ()));
} Else if (currentList. next (). length = 0 ){
// If the last one is selected, it is unselected and the input box is selected.
UnHoverAll ();
} Else {
UnHoverAll ();
// Select the next column of the selected column
If (currentList. next (). length! = 0)
$ (This). val (getPointWord (currentList. next ()
. Mouseover ()));
}
Return false;
} Else if (event. keyCode = options. keyUp) {// if you press the up arrow key
If (currentList. length = 0 ){
$ (This). val (getPointWord (dropDiv. find ('. list: la ')
. 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 value of the input box before pressing the key to check whether the value of the key has changed.
$ (This). attr ('alt', $ (this). val ());
}). Bind ('keyup', function (event ){
// If the highlighted key is the up or down direction key, return
If (event. keyCode = options. keyDown | event. keyCode = options. keyUp) return;
If ($ (this). val () = ''){
DropDiv. empty (). hide ();
Return;
}
// If the value of the input box is not changed or becomes null, return
If ($ (this). val () ==$ (this). attr ('alt '))
Return;
GetData (pa, $ (this). val ());
}). Bind ('blur', function (){
If (isOver & dropDiv. find ('.' + options. listHoverCSS )! = 0) return;
// If the text input box loses focus, it is cleared and the prompt layer is hidden.
DropDiv. empty (). hide ();
});
/** Method for processing ajax return success **/
HandleResponse = function (parent, json ){
Var isEmpty = true;
For (var o in json ){
If (o = 'data') isEmpty = false;
}
If (isEmpty ){
ShowError ("returned data format error. Please check whether the request URL is correct! ");
Return;
}
If (json ['data']. length = 0 ){
// The returned data is empty.
Return;
}
RefreshDropDiv (parent, json );
DropDiv. show ();
}
/** Method for processing ajax failures **/
HandleError = function (error ){
// ShowError ("failed due to url error or timeout request! ");
}
ShowError = function (error ){
Alert (error );
}
/** Use ajax to return json format data to generate a dom string **/
Render = function (parent, json ){
Var res = json ['data'] | json;
Var appendStr = '';
// Replace the matching/\ {([a-z] +) \}/ig content in the template string with the content in the json object, for example, {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 );
}
/** Insert the new dom object to the prompt box and re-bind the mouseover event listener **/
Jebind = function (parent, ){
DropDiv. append ();
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 ();
});
});
}
/** Remove the hover style of all columns in the prompt box **/
UnHoverAll = function (){
DropDiv. find ('. list'). each (function (){
$ (This). removeClass (options. listHoverCSS );
});
}
/** Get the currently selected prompt keyword in the prompt box **/
GetPointWord = function (p ){
Return p. find ('P: 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 prompt box from disappearing because the focus of the input box is lost before ajax returns
Parent. focus ();
}
/** Request data from the server through 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 webpage style:
The Code is as follows:
Call method:
The Code is as follows:
