Automatic completion function based on jquery_jquery

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

Copy code The code is as follows:

$(function() {
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thisCount =0;// 初始化他框的位置
    $("body").prepend("

");
$("#sele").keyup(function(even) {
      var v = even.which;
If (v == 38 || v == 40 || v == 13)// Prevent him from transmitting data when clicking the up and down keys or the OK key
                {
             return;
            }
        var txt = $("#sele").val();//Here is to get the value of his input box
If (txt != "") {
//Assemble data
               $.ajax({
​​​​​​​ url: "Birthday_autoCompletion",//Get 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; // Re -worth it
                             $.each(ls, function(k, v) {
Candidate = "

" v "

";
                                                                                                                                                                                                   });
$("#autoTxt").html(Candidate);
                        $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//Highlight object
$('body').highLight();
                                     $('body').highLight($("#sele").val());
                    event.preventDefault();
//Reflect when a LI is clicked
$("#autoTxt li").click(function(){
                                  $("#sele").val($("#autoTxt li:eq(" this.id ")").text());
$("#autoTxt").html("");
                            $("#autoTxt").hide();
                        });
                        //移动对象
                        $("#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();
        }
    });
    //当单击ＢＯＤＹ时则隐藏搜索值
    $("body").click(function(){
        $("#autoTxt").html("");
        $("#autoTxt").hide();
        thisCount=0;
    });
    // 写移动事件//上键３８ 下键４０ 确定键 １３
    $("body").keyup(function(even) {
        var v = even.which;
            if (v == 38)// 按上键时
            {
                if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
                    $("#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) {// 按下键时
                if(thisCount                 {
                    $("#sele").blur();
                    thisCount;
                    $("#autoTxt li").css("background", "#FFFFFF");
                    $("#autoTxt li:eq(" thisCount ")").css("background", "#A8A5A5");
                }
            } else if (v == 13) {// 按确认键时
                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;
                    }
            }
    });
});

希望本文所述对大家的jQuery程序设计有所帮助。