Automatic completion based on jquery

The example of this article describes the method of automatic completion based on jquery. Share with you for your reference. The specific implementation method is as follows:

$(function() {

    //  Automatic completion 

    var maxcount = 0;//  Is his maximum value 

    var thisCount =0;//  Initializes the position of his box 

    $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");

    $("#sele").keyup(function(even) {

        var v = even.which;

        if (v == 38 || v == 40 || v == 13)//  Block him from sending data when he clicks up or down or ok 

            {

            return;

            }

        var txt = $("#sele").val();// Here is the value of the input box that gets it 

        if (txt != "") {

            // Assemble the data 

            $.ajax({

                url : "Birthday_autoCompletion",// Get it from the background json data 

                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;// It's worth it again 

                    $.each(ls, function(k, v) {

                        Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";

                        maxcount++;

                    });

                    $("#autoTxt").html(Candidate);

                    $("#autoTxt li:eq(0)").css("background", "#A8A5A5");

                    // Highlighting 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();

                        });

                        // Moving objects 

                        $("#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();

        }

    });

    // The search value is hidden when the BODY is clicked 

    $("body").click(function(){

        $("#autoTxt").html("");

        $("#autoTxt").hide();

        thisCount=0;

    });

    //  Write move event // At 38 key   The key to 40   Identify key   13 

    $("body").keyup(function(even) {

        var v = even.which;

            if (v == 38)//  Press the key 

            {

                if(thisCount!=0){// If it's equal to zero, it doesn't work. 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 button 

                if(thisCount<maxcount-1)

                {

                    $("#sele").blur();

                    ++thisCount;

                    $("#autoTxt li").css("background", "#FFFFFF");

                    $("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");

                }

            } else if (v == 13) {//  When you press ok 

                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 has been helpful to your jQuery programming.