Copy code code as follows:
/*Text automatically fill in zhouxiang*/
(Function ($) {
$ .Complting = Fundration (setting) {
var opts = $ .extEnd ({}, $ .compleTion.defaultSetting, Setting);
//width
var completing_width = null;
//high
var completing_height = null;
// Data source (ASHX) access path
var completing_data_url = null;
// object
var completing_obj = null;
var completing_obj_show = null;
// Object distance left distance
var completing_obj_marginleft = null;
// Object distance from the upper side
var completing_obj_margintop = null;
// Object height
var CompleTion_OBJ_HEIGHT = NULL;
//Classification
var completing_count = null;
//
var completing_type_obj = null;
//content
var completing_value = null;
//type
var completing_type = null;
// Whether to pass the type
var completing_book = false;
//count
var CompleTion_n = 0;
// Enter back and call back
var completing_clickcall = null;
//load
Function Completing_Loading () {
//initialization
Init ();
// Binded events
Complete_obj_addevent ();
}
//initialization
function init () {) {
Complete_obj_show = OPTS.COMPLETION_OBJ_SHOW;
// Obtain object
Complete_obj = option_Obj;
// Get the width of the object
Complete_width = complete_obj.width ();
// Getting layer display height
Completing_height = OPTS.COMPLETION_HEIGHT;
// Get access database URL
Complete_data_url = OPTS.COMPLETION_DATA_URL;
// How many records do you query each time
Complete_count = options.comPleTion_count;
// Get the object height
Complete_obj_height = complete_obj.height ();
// Get the left distance
Complete_obj_marginleft = complete_obj.offset (). Left;
// Get the upper distance
Complete_obj_margintop = PARSEINT (Completion_Obj.offset (). TOP) + PARSEINT (Completion_OBJ_HEIGHT);
Complete_type_obj = option_type_obj;
Complete_bool = option_Bool;
Complete_clICKCALL = options.comPleTion_clICKCALL;
}
// Add events to the object
Function Completing_Obj_addevent () {) {)
Complete_obj.keyup (function (event) {
switch (event.keycode) {
Case 38:
Break;
Case 40:
Break;
Case 13:
Complete_clICKCALL ();
Break;
DEFAULT:
// Key event delay operation
CimpleTion_bind ();
Break;
}
});
Complete_obj.keydown (function (event) {
switch (event.keycode) {
Case 13:
Break;
Case 38:
if (CompleTion_n == 0) {{
Complete_n = (complete_obj_show.find ("li").
} else if (Completing_n! = 0) {{
Complete_n = complete_n -n;
}
// Alert (CompleTion_n);
Complete_obj_show.find ("li"). Find ("a"). RemoveClass ("Completion-GuesS-List-Hover");
Complete_obj_show.find ("li"). EQ (CompleTion_n) .find ("A"). AddClass ("Completor-Guess-List-Hover")););
Complete_obj.val (complete_Obj_Show.find ("li"). EQ (Completion_n) .find ("ul"). Text ());
Break;
Case 40:
if (complete_n + 1 <complting_obj_show.find ("li").
Complete_n = complete_n + 1;
} Else if (Completing_n + 1 == Completion_obj_show.find ("li").
CompleTion_n = 0;
}
Complete_obj_show.find ("li"). Find ("a"). RemoveClass ("Completion-GuesS-List-Hover");
Complete_obj.val (complete_Obj_Show.find ("li"). EQ (Completion_n) .find ("ul"). Text ());
Complete_obj_show.find ("li"). EQ (CompleTion_n) .find ("A"). AddClass ("Completor-Guess-List-Hover")););
Break;
DEFAULT:
Break;
}
});
}
// Binding method
function cimpleting_bind () {
// Whether to open the type judgment
if (CompleTion_Bool) {
Complete_type = complete_type_obj.val ();
}
Complete_value = complete_obj.val ();
Complete_value = complete_value.replace ("", "");
// Execute verification
CompleTion_verification (Completing_value);
if (CompleTion_value.Length> 1) {{
// Get the data structure html
Complete_data_bind ();
} Else {
Complete_obj_show.hide ();
}
}
//verify
Function Completion_verification (OBJ) {{
if (obj == "" "|| Obj == NULL || Obj == Undefined) {
Return false;
}
}
// Execute the Ajax request to get the data
Function Completing_Data_Bind () {
$ .ajax ({{
URL: Completing_data_url,
Data: {CompletionValue: Completing_value, CompletionCount: Completing_Count, CompletionType: Completing_type},
Type: "Post",
datatype: "json",
Success: Function (OBJ) {
// Construct HTML
Complete_add_html (obj);
}
});
}
// Select
Function Completing_Select (OBJ) {
Complete_obj.val (obj.find ("ul"). Text ());
Complete_obj_show.hide ();
}
// Construction content
Function Completing_add_html (OBJ) {
var data = object_data;
// Execute verification
CompleTion_verification (data);
var completing_li = "";
if (data! = NULL && DATA! = Undefined) {
for (var I = 0; I <data.Length; i ++) {
// Whether the verification is empty
Var Dr = Data [i];
CompleTion_verification (DR);
var CompleTionName = Dr. Cometing_name;
ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "<span class='c-hover'>" + Completion_Value.toUpperCase() + "</span>");
Complete_li + = "<li> <a href = 'javascript:;'> <span class = 'c-total'> Approximate" + DR.COMPLETION_COUNT + "entry records </span> <ul> + CompletionName +" <" /ul> </a> </li> "";
}
if (Completing_li! = "") {{
var completing_html = "<ul style = 'list-style-type: none;'>" " + Completion_li +" </ul> "";
Complete_obj_html (Completing_html);
} Else {
Complete_obj_show.hide ();
}
}
}
// MOUSE
Function MouseHover (OBJ) {
Complete_obj_show.find ("li"). Mouseover (function () {) {
Complete_obj_show.find ("li"). Find ("a"). RemoveClass ("Completion-GuesS-List-Hover");
Complete_obj.val ($ (this) .find ("ul"). Text ());
Complete_n = complete_obj_show.find ("li"). Index (this);
});
}
// Bind to control
Function Completing_OBJ_HTML (HTML) {
Complete_obj_show.show ();
Complete_obj_show.html ("")
CompleTion_OBJ_SHOW.CSS ({"width": complete_width + 6, "Height": Completing_height, "Border-Width": "1px", "Border-COLOR": "#CCC", "Border-Top-Wid" th ":" 0px "," Border-Style ":" Solid "," Position ":" Relative "," Z-index ":" 100000 "});
Complete_obj_Show.attr ("class", "Completing-Guess-List");
Complete_obj_show.html (html);
Complete_n = -1;
Complete_obj_show.find ("li"). Unbind ("click").
CompleTion_SeleCted ($ (this));
});
MouseHover ($ (this));
CompleTion_Obj_SHOW.CLICK (Function (E) {
e.stoppropagation ();
})
CompleTion_Obj.Click (Function (E) {
CimpleTion_bind ();
e.stoppropagation ();
});
$ (docume) .click (function () {
Complete_obj_show.hide ();
});
}
//load
Complete_loading ();
};
// default configuration
$ .CompleTion.defaultSetting = {
CompleTion_height: Null,
CompleTion_data_url: NULL,
Complete_obj: null,
Complete_obj_show: null,
CompleTion_Bool: False,
Complete_count: 10,
Complete_type_obj: null,
Complete_clICKCALL: null
};
}) (jquery);
Copy code code as follows:
body
{{
margin: 0;
padding: 0;
}
.CompleTion-Guess-List ul, li
{{
margin: 0;
padding: 0;
list-style: none;
}
.CompleTion-guess-list
{{
overflow: Auto;
font-size: 12px;
line-height: 180%;
background: #fff;
}
.CompleTion-Guess-List a
{{
color: #555;
text-decoration: None;
display: block;
padding: 1px 6px;
overflow: hidden;
White-space: Nowrap;
FONT-FAMILY: Verdana, Arial;
}
.CompleTion-guess-list a .c-total {float: right; color: gran;}
.CompleTion-Guess-List A: Hover, .compleTion-guess-List a.CompleTion-Guess-List-Hover
{{
background: #3399ff;
color: #fff;
}
.CompleTion-Guess-List A: Hover Span.c-Total, .CompleTion- Guess-List a.COMPLETION-Guess-lover Span.c-total {Color: #fff;};}
.CompleTion-Guess-List .c-Hover {font-weight: 700;}
Copy code code as follows:
$ .Complting ({Completing_Obj: $ ("#input_html"), Completion_data_url: "/CompleTionhandler.ASHX", Completion_height: "Auto", Completion_obj_show: $ (" #Show "), Completion_Bool: True, Completing_type_obj: $ ("# Type "), complete_clickcall: function () {alert (1);}, complex_length: 0});