Automatic complementing Function Based on jquery _ jquery

This article mainly introduces jquery-based auto-completion full-function methods, and involves jQuery operation data completion techniques. It has some reference value, for more information, see the examples in this article. Share it with you for your reference. The specific implementation method is as follows:

The Code is as follows:

$ (Function (){
// Auto-completion
Var maxcount = 0; // It indicates its maximum value.
Var thisCount = 0; // initialize the location of the box
$ ("Body"). prepend ("

");
$ ("# Sele"). keyup (function (even ){
Var v = even. which;
If (v = 38 | v = 40 | v = 13) // when you click the up or down key or confirm the key, it is blocked from transmitting data.
{
Return;
}
Var txt = $ ("# sele"). val (); // obtain the value of his input box.
If (txt! = ""){
// Assemble data
$. Ajax ({
Url: "Birthday_autoCompletion", // obtain json data from the background
Type: "post ",
DataType: "json ",
Data: {"bir. userName": txt
},
Success: function (ls ){
Var offset = $ ("# sele"). offset ();
$ ("# AutoTxt"). show ();
$ ("# AutoTxt" ).css ("top", (offset. top + 30) + "px ");
$ ("# AutoTxt" ).css ("left", offset. left + "px ");
Var Candidate = "";
Maxcount = 0; // obtain the value again
$. Each (ls, function (k, v ){
Candidate + ="

"+ V +"

";
Maxcount ++;
});
$ ("# AutoTxt" 2.16.html (Candidate );
$ ("# AutoTxt li: eq (0)" ).css ("background", "# A8A5A5 ");
// Highlight the object
$ ('Body'). highLight ();
$ ('Body'). highLight ($ ("# sele"). val ());
Event. preventDefault ();
// When a LI is clicked
$ ("# AutoTxt li"). click (function (){
$ ("# Sele"). val ($ ("# autoTxt li: eq (" + this. id + ")"). text ());
$ ("# AutoTxt" ).html ("");
$ ("# AutoTxt"). hide ();
});
// Move the object
$ ("# AutoTxt li"). hover (function (){
$ ("# AutoTxt li" ).css ("background", "# FFFFFF ");
$ ("# AutoTxt li: eq (" + this. id + ")" ).css ("background", "# A8A5A5 ");
ThisCount = this. id;}, function (){
$ ("# AutoTxt li" ).css ("background", "# FFFFFF ");});
},
Error: function (){
$ ("# AutoTxt" ).html ("");
$ ("# AutoTxt"). hide ();
Maxcount = 0;
}
});
} Else {
$ ("# AutoTxt"). hide ();
Maxcount = 0;
$ ("# Sestart"). click ();
}
});
// Hide the search value when you click the BODY.
$ ("Body"). click (function (){
$ ("# AutoTxt" ).html ("");
$ ("# AutoTxt"). hide ();
ThisCount = 0;
});
// Write a mobile event // press the 38 key and press the 40 key to confirm the 13 key
$ ("Body"). keyup (function (even ){
Var v = even. which;
If (v = 38) // when you press the upper key
{
If (thisCount! = 0) {// if it is equal to zero, it indicates that it cannot be mounted. So get focus
$ ("# Sele"). blur ();
If (thisCount> 0)
-- ThisCount;
Else
ThisCount = 0;
$ ("# AutoTxt li" ).css ("background", "# FFFFFF ");
$ ("# AutoTxt li: eq (" + thisCount + ")" ).css ("background", "# A8A5A5 ");
} Else {$ ("# sele"). focus ();}
} Else if (v = 40) {// press the key
If (thisCount {
$ ("# Sele"). blur ();
++ ThisCount;
$ ("# AutoTxt li" ).css ("background", "# FFFFFF ");
$ ("# AutoTxt li: eq (" + thisCount + ")" ).css ("background", "# A8A5A5 ");
}
} Else if (v = 13) {// press the confirm key
Var tt = $ ("#" + thisCount). text ();
If (tt! = "")
{
$ ("# Sele"). val (tt );
$ ("# AutoTxt" ).html ("");
$ ("# AutoTxt"). hide ();
} Else
{
If ($ ("# sele"). val ()! = "")
$ ("# Sestart"). click ();
}
} Else {
If ($ ("# autoTxt" ).html ()! = "")
{
$ ("# Sele"). focus ();
ThisCount = 0;
}
}
});
});

I hope this article will help you with jQuery programming.