jquery realizes the text automatic complement effect of text box

  This article mainly introduces jquery to achieve text box text automatically complement the full effect, we refer to the use of the bar

  Code as follows:/* Text auto-complement zhouxiang*/  (function ($) {    $. completion = function (setting) {        var opts = $.extend ({}, $. completion.defaultsetting, setting);        //width         var completion_width = null;        //high         var completion_height = null;        //Data source (ASHX) Access path         var completion_data_url = null;        //object         var completion_obj = null;         var completion_obj_show = null;        //object distance from the left of         var completion_obj_marginleft = null;        //object distance top margin         var completion_obj_margintop = null;        //object height         var completion_obj_height = null;        //classification         var Completion_count = null;        //        var completion_type_obj = null;        //content         var completion_value = null;        //type         var completion_type = null;        //whether incoming type         var completion_bool = false;        //Count         var completion_n = 0;        //Carriage return callback         var completion_clickcall = null;        //loading         function completion_loading () {        & nbsp  //initialization             Init ();            //binding event             completion_obj_addevent ();        }        //init         function Init () {            Completion_obj_show = opts. Completion_obj_show;            //Get object             Completion_obj = opts. Completion_obj;            //Get object width             Completion_width = completion _obj.width ();            //Get layer display height             Completion_height = opts. Completion_height;            //Get Access database Url             Completion_data_url = opt S.completion_data_url;            //per query How many records             Completion_count = opts. Completion_count;            //Get object height             Completion_obj_height = compl Etion_obj.height ();            //Get left margin             CoMpletion_obj_marginleft = Completion_obj.offset (). Left;            //Get top margin             completion_obj_margintop = par Seint (Completion_obj.offset (). Top) + parseint (completion_obj_height);             completion_type_obj = opts.completion_type_obj;             Completion_bool = Opts.completion_bool;             Completion_clickcall = Opts.completion_clickcall;        }        /Add event to object         function Completion_obj_ad Devent () {            Completion_obj.keyup (function (event) {        & nbsp       switch (event.keycode) {                    3 8:                         break;       &nbsp             case:                     & nbsp   break;                     case:             & nbsp           Completion_clickcall ();                         break;                     default:             & nbsp          //key event delay operation                     &NBSP ;     Cimpletion_bind ();                         break;                 (             });             Completion_obj.keydown (function (event) {&NBSp               switch (event.keycode) {                    Case:                         break;                     case:             & nbsp           if (completion_n = 0) {                            Completion_n = (completion_obj_show.find ("Li"). length-1);                        } else if (completion_n!= 0) {                            Completion_n = Completion_n- 1;                                   & nbsp         &NBSp  //alert (completion_n);                         completion_obj_show.find ("Li"). Find ("a "). Removeclass (" Completion-guess-list-hover ");                         completion_obj_show.find ("Li"). EQ (Comp Letion_n). Find ("a"). AddClass ("Completion-guess-list-hover");                         Completion_obj.val (completion_obj_show . Find ("Li")-eq (completion_n)-Find ("UL"). Text ());                             break;                     case:             & nbsp           if (Completion_n + 1 < completion_obj_show.find ("Li"). Length) {                            Completion_n = completion_n + 1;                        } else if (completion_n + 1 = complet Ion_obj_show.find ("Li"). Length {                        &NBS P   Completion_n = 0;                                   & nbsp             completion_obj_show.find ("Li"). Find ("a"). Removeclass (" Completion-guess-list-hover ");                         Completion_obj.val (completion_obj_show . Find ("Li")-eq (completion_n)-Find ("UL"). Text ());                         completion_obj_show.find ("Li"). EQ (Comp Letion_n). Find ("a"). AddClass ("Completion-guess-list-hover");                           break;                     default:             & nbsp           break;                   (           });        }        //binding method         function Cimpletion_bind () {            //Open type judgment             if (completion_bool) {&nbs P               Completion_type = Completion_type_obj.val ();                         Completion_value = Completion_obj.va L ();             Completion_value = Completion_value.replace ("", "");            //perform validation             Completion_verification (complet Ion_value);             if (Completion_value.length > 1) {               //Get Data Construct HTML                 completion_data_bind ();            } else {                Completion_obj_ Show.hide ();                     {       //validation     & nbsp   function completion_verification (obj) {            if (obj = "" | | obj = NULL | | obj = = undefined) {                return false;         &NBS P   {       }        //execute AJAX request get data         function Co Mpletion_data_bind () {            $.ajax ({                Url:completion_data_url, &NBsp               data: {completionvalue:completion_value, Completioncount:completion_co UNT, Completiontype:completion_type},                 Type: "Post",   &NBSP ;             DataType: "JSON",                 succes S:function (obj) {                   //Construction HTML       &N Bsp             completion_add_html (obj);                 (           });        }        /select         function completion_selected (ob j) {            Completion_obj.val (Obj.find ("ul"). Text ();         &NBS P   Completion_obj_show.hide ();        }     &NBsp  //Construction content         function completion_add_html (obj) {            VA R data = Obj.completion_data;            //perform validation             completion_verification (data);             var completion_li = "";             if (data!= null && data!= undefined) {        &NB Sp       for (var i = 0; i < data.length; i++) {                &N Bsp  //execution validation is null                     var dr = Data[i];                     completion_verification (DR);                     var completionname = Dr.completion_name;                       CompletioNname = Completionname.replace (Completion_value.touppercase (), <span class= ' c-hover ' > "+ Completion_ Value.touppercase () + "</span>");                     Completion_li + + <li><a href= ' javascript:; ' ><span class= ' c-total ' > About ' + Dr. Completion_count + "Record </span><ul>" + Completionname + "</ul></a></li>";                                 if (ComP Letion_li!= "") {                    var completion_html = "<ul sty Le= ' List-style-type:none; ' > "+ completion_li + </ul>";                     completion_obj_html (completion_html);                } else {                & nbsp   Completion_obj_show.hide ();                                    }        //mouse         function MouseHover (obj) {            Completion_obj_show.find ("Li"). MouseOver (function () {              &NBS P Completion_obj_show.find ("Li"). Find ("a"). Removeclass ("Completion-guess-list-hover");                 Completion_obj.val ($ (this). FIND ("UL"). Text ());                 Completion_n = completion_obj_show.find ("li"). index (this);            });        }        //binding to control         function completion_obj_html (HTML) {            completion_obj_show.show ();             Completi On_obj_show.html ("")   &NBSp         COMPLETION_OBJ_SHOW.CSS ({"width": Completion_width + 6, "height": completion_height, "border -width ": 1px", "Border-color": "#CCC", "border-top-width": "0px", "border-style": "Solid", "position": "Relative", " Z-index ":" 100000 "});             completion_obj_show.attr ("Class", "completion-guess-list");             completion_obj_show.html (HTML);             completion_n =-1;             completion_obj_show.find ("Li"). Unbind ("click"). Click (function () {  & nbsp             completion_selected ($ (this));            });             MouseHover ($ (this));             Completion_obj_show.click (function (e) {          &NBS P     e.stoppropagation ();            })             Completion_obj.click (function (e) {        &NBSP ;       Cimpletion_bind ();                 e.stoppropagation ();            });             $ (document). Click (function () {                Completion_obj_show.hide ();            });        }        //loading         completion_loading ();    };    //default configuration     $. completion.defaultsetting = {        Completion_height:null,         Completion_ Data_url:null,         Completion_obj:null,         Completion_obj_show:null, & nbsp       Completion_bool:false,         COMPLETION_COUNT:10,         Completion_type_obj:null,         Completion_clickcall:null   &N Bsp };  }) (JQuery);         code is 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%; &nbs P   Background: #fff; } . Completion-guess-list a {    color: #555;     Text-decoration:none;     Display:block; &n Bsp   PADDING:1PX 6px;     Overflow:hidden;     White-space:nowrap;     font-family:verdana,arial; } . Completion-guess-list A. C-total{float:right;color:green; 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-list-hover Span.c-total{color: #fff; Completion-guess-list. c-hover{font-weight:700}       code is as follows: $. Completion ({completion_obj: $ ("#Input_Html"), Completion_data_url: "/completionhandler.ashx", Completion_height: " Auto ", Completion_obj_show: $ (" #show "), Completion_bool:true, Completion_type_obj: $ (" #Type "), Completion_clickcall: function () {alert (1);}, completion_length:0});