js自动补全功能实现代码

$(function(){
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thisCount = 0;// 初始化他框的位置
    $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
    $("#subk").keyup(function(even){
        var v = even.which;
       
        if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
        {
            return;
        }
        var txt = $("#subk").val();// 这里是取得他的输入框的值
        if (txt != "") {
            // 拼装数据
            $.ajax({
                url: "GetCompleteServelt",// 从后台取得json数据
                type: "post",
                data: {
                    "queryString": txt
                },
                timeout: 1000,
                success: function(data){
                    var ls = eval('(' + data + ')');
                    var offset = $("#subk").offset();
                    $("#autoTxt").show();
                    $("#autoTxt").css("top", (offset.top + 33) + "px");
                    $("#autoTxt").css("left", (offset.left - 7) + "px");
                    $("#autoTxt").css("width", 532 + "px");
                    var Candidate = "";
                    maxcount = 0;//再重新得值
                    $.each(ls, function(k, v){
                        Candidate += "<li id='" + maxcount + "'>" + v + "</li>";
                        maxcount++;
                    });
                    $("#autoTxt").html(Candidate);
                    even.preventDefault();
                    $("#autoTxt li").click(function(e){
                        $("#subk").val($("#autoTxt li:eq(" + this.id + ")").text());
                        $("#autoTxt").html("");
                        $("#autoTxt").hide();
                        var content = $("#subk").val();
                        $("#myForm").attr("action", "SorlServelt?queryString=" + content).submit();
                        e.stopPropagation();
                    });
                   
                    $("#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;
                }
            });
        }
    });
    // 当单击ＢＯＤＹ时则隐藏搜索值
    $("body").click(function(){
        $("#autoTxt").html("");
        $("#autoTxt").hide();
        thisCount = 0;
    });
    // 写移动事件//上键３８ 下键４０ 确定键 １３
    var prev = 0;
    $("#subk").keyup(function(even){
        var v = even.which;
        if (v == 38)// 按上键时
        {
       
            if (thisCount != 0) {// 等于零时则证明不能上了。所以获得焦点
                if (thisCount > 0) {
                    if (prev == 38) {
                        thisCount = thisCount - 2;
                        var tt = $("#" + thisCount).text();
                        $("#subk").val(tt);
                        prev = 40;
                    }
                    else {
                        --thisCount;
                        var tt = $("#" + thisCount).text();
                        $("#subk").val(tt);
                        prev = 40;
                    }
                   
                }
                else {
                    thisCount = 0;
                    prev = 40;
                }
                $("#autoTxt li").css("background", "#FFFFFF");
                $("#autoTxt li:eq(" + thisCount + ")").css("background", "#A8A5A5");
               
            }
           
           
        }
        else
            if (v == 40) {// 按下键时
                if (thisCount < maxcount) {
                    if (prev == 40) {
                        thisCount = thisCount + 1;
                        var tt = $("#" + thisCount).text();
                        $("#subk").val(tt);
                        $("#autoTxt li").css("background", "#FFFFFF");
                        $("#autoTxt li:eq(" + thisCount + ")").css("background", "#A8A5A5");
                        prev = 38;
                    }
                    else {
                        var tt = $("#" + thisCount).text();
                        $("#subk").val(tt);
                        $("#autoTxt li").css("background", "#FFFFFF");
                        $("#autoTxt li:eq(" + thisCount + ")").css("background", "#A8A5A5");
                        ++thisCount;
                        prev = 38;
                    }
                   
                }
            }
            else
                if (v == 13) {// 按确认键时
                    var tt = $("#" + thisCount).text();
                    if (tt != "") {
                        $("#subk").val(tt);
                        $("#autoTxt").html("");
                        $("#autoTxt").hide();
                        var content = $("#subk").val();
                        $("#myForm").attr("action", "SorlServelt?queryString=" + content).submit();
                        even.stopPropagation();
                    }
                    else {
                        if ($("#subk").val() != "")
                            $("#sestart").click();
                    }
                }
                else {
                    if ($("#autoTxt").html() != "") {
                        $("#subk").focus();
                        thisCount = 0;
                    }
                }
    });
});