Js auto-completion code sharing,
Js Code // --------------------------------------------------- automatically complete begin ---------------------------------- var maxcount = 0; // It indicates his maximum value var thisCount = 0; // initialize his box position var flagThis = 0; var flag = 0; // indicates whether Automatic completion is selected. // function zdbq (obj) {var id = obj; document. getElementById ("zdbqid "). value = id; jQuery ("#" + id ). keyup (function (even) {document. getElementById ("autoTxt "). style. width = 214 + "px"; var v = even. which ;// Enter key: 13; move key 38; press down to 40 // when you click the up or down key or press OK to prevent him from transmitting data if (v = 38 | v = 40 | v = 13) {return ;} var txt = jQuery ("#" + id ). val (); // here is the value of his input box if (txt! = "") {JQuery. ajax ({url: "xxx_xxx.action", // obtain json data type: "post", dataType: "json", data: {"name": txt}, success: function (ls) {flagThis = 1; var offset = jQuery ("#" + id ). offset (); // The offset () method returns or sets the offset (location) of the matching element relative to the document ). JQuery ("# autoTxt "). show (); jQuery ("# autoTxt" ).css ("top", (offset. top + 22) + "px"); jQuery ("# autoTxt" ).css ("left", offset. left + "px"); var Candidate = ""; maxcount = 0; // obtain the value var list = eval (ls); jQuery. each (list, function (k, v) {var nn = (v + ""). split (","); Candidate + =""+ Nn [0] +""+ Nn [1] +" "; maxcount ++;}); jQuery (" # autoTxt ").html (Candidate); jQuery (" # autoTxt li: eq (0) ").css (" background "," # A8A5A5 "); // the first data is selected by default during initialization. // jQuery (" # autoTxt LI ") is reflected when a li is clicked "). click (function () {flag = 1; // indicates whether to automatically complete var jgname = jQuery ("# autoTxt li: eq (" + this. id + ")"). text (); // obtain the name var fid = jQuery ("# autoTxt span: eq (" + thisCount + ")"). text (); // obtain the id jQuery ("#" + id ). val (jgname); // enter the name $ ("# jcid "). val (fid); // put the id jQuery ("# autoTxt" ).html (""); jQuery ("# autoTxt "). hide () ;}); // move the jQuery object ("# autoTxt li "). hover (function () {jQuery ("# autoTxt li" ).css ("background", "# FFFFFF"); jQuery ("# autoTxt li: eq (" + this. id + ")" ).css ("background", "# A8A5A5"); thisCount = this. id ;}, function () {jQuery ("# autoTxt li" ).css ("background", "# FFFFFF") ;}, error: function () {jQuery ("# autoTxt" ).html (""); jQuery ("# autoTxt "). hide (); maxcount = 0 ;}}) ;}else {jQuery ("# autoTxt" ).html (""); jQuery ("# autoTxt "). hide (); maxcount = 0 ;}}); // =======================================start of auto-completion of public parts ================== ====================================/// when you click the BODY, the search value jQuery ("body") is hidden "). click (function () {jQuery ("# autoTxt" ).html (""); jQuery ("# autoTxt "). hide (); thisCount = 0 ;}) ;}// select jQuery (function () {// press the keyboard to move the event to 38, press 40, key 13 jQuery ("body "). keyup (function (even) {var id = document. getElementById ("zdbqid "). value; var v = even. which; if (38 = v) {// top key if (thisCount> 0) {-- thisCount;} else {thisCount = maxcount-1 ;} jQuery ("# autoTxt li" ).css ("background", "# FFFFFF"); jQuery ("# autoTxt li: eq (" + thisCount + ") "mirror.css (" background "," # A8A5A5 ");} else if (40 = v) {// The lower key if (thisCount
Use onload = "zdbq ('auto-complete input id') in the body;" as long as the json object is encapsulated in the background, the detailed code will not be displayed, only the json code JSONArray arr = new JSONArray (); Object [] obj = new Object [] {name, id}; // The name and id are passed to the front-end arr. add (obj );
