autocomplate

$(function() {
    $("div[targetid]").each(function() {
        var $inputid = $(this).attr("targetid");
        var $posturl = $(this).attr("geturl");
        var $itembgcolor = $(this).attr("itembgcolor");
        var $innerhtml = "<input id='" + $inputid + "' type='text' style='width: 100%; margin: 0;' />";
        $innerhtml += "<div class='floatdiv'></div>";
        $(this).append($innerhtml);
        $("#" + $inputid).keyup(function(e) { fetchKey(e, $posturl, $itembgcolor, $inputid); });
        $(this).find(".floatdiv").keydown(function(e) { keyFetchVal(e, $itembgcolor, $inputid); });
    });
    $("html").click(function() { hideList(); });
})


function fetchKey(e, posturl, itembgcolor, inputid) {
    var kvalue = kvalue = $(e.target).val(); // fetch data from textbox

    var whichCode = (window.Event) ? e.which : e.keyCode;

    if (whichCode == 13 || whichCode == 37 || whichCode == 39)     // the key is Enter、LEFT、RIGHT
    {
        return false;
    }
    else if (whichCode == 8 || whichCode == 32) // the key is Backspace and space
    {
        if ($.trim(kvalue) == "") {
            hideList();
            return false;
        }
        if (kvalue.length >= 1)
            fetch_search_info(kvalue, posturl, itembgcolor, inputid);
    }
    else if (whichCode == 40) //the key is downkey
    {
        var $pid = $(e.target).next();

        if ($pid.css("display") == 'none') { return false; }
        if ($pid.has("li")) {
            $pid[0].focus();
            if ($pid.find("." + itembgcolor)[0] == undefined) {
                setBackgroundColor($pid.find("li:eq(0)"), itembgcolor);
            }
            else {
                setBackgroundColor($pid.find("." + itembgcolor).next(), itembgcolor);
            }
        } else { return false; }
    }

    else if ((whichCode >= 45 && whichCode <= 57) || (whichCode >= 65 && whichCode <= 90) || (whichCode >= 96 && whichCode <= 105)) // the whichCode's value between 45~57 is number 0~9,65~90 is char a~z、A~Z , 96~105 is number 0~9
    {
        kvalue = $(e.target).val();
        if (kvalue.length >= 1)
            fetch_search_info(kvalue, posturl, itembgcolor, inputid);
    }
    else event.returnValue = false;
}

function fetch_search_info(keyVal, posturl, itembgcolor, inputid) {
    $.ajax({
        type: "post",
        url: posturl,
        data: "keyval=" + keyVal,
        success: function(result) {
            var data = eval(result);
            if (data == null || data.length == null) {
                hideList();
                return;
            }
            fetch_search_info_Callback(data, itembgcolor, inputid);
        }
    });
}

function fetch_search_info_Callback(result, itembgcolor, inputid) {
    var html = "";
    for (var i = 0; i < result.length; i++) {
        html += createhtml(result[i]["ClientID"], result[i]["ClientName"], itembgcolor, inputid);
    }
    if ($.trim(html) == "") {
        hideList();
    }
    else {
        $("#" + inputid).next().html("<ul>" + html + "</ul>");
        showList();
    }
}

function createhtml(id, text, itembgcolor, inputid) {
    return "<li onmouseover=\"setBackgroundColor(this,'" + itembgcolor + "')\" uid='" + id + "' onclick=\"setValue(this,'" + inputid + "')\">" + text + "</li>";
}
function setBackgroundColor(obj, itembgcolor) {
    $(obj).parent().parent().focus();
    $(obj).parent().find("li").removeClass(itembgcolor);
    $(obj).addClass(itembgcolor);
}

function setValue(obj, inputid) {
    $("#" + inputid).val($(obj).text());
    $("#" + inputid).attr("uid", $(obj).attr("uid"));
    $("#" + inputid).focus();
    hideList();
}

function keyFetchVal(e, itembgcolor, inputid) {
    var whichCode = (window.Event) ? e.which : e.keyCode;

    switch (whichCode) {
        case 13: // Enter
            {
                setValue($(e.target).find("." + itembgcolor), inputid);
            }; break;
        case 38: //Upkey
            {
                //e.preventDefault();
                if ($(e.target).find("." + itembgcolor).prev()[0] == undefined) { return; }
                setBackgroundColor($(e.target).find("." + itembgcolor).prev(), itembgcolor);
            } break;
        case 40: //Downkey
            {
                //e.preventDefault();

                if ($(e.target).find("." + itembgcolor).next()[0] == undefined) { return; }
                setBackgroundColor($(e.target).find("." + itembgcolor).next(), itembgcolor);
            } break;
        default: break;
    }

    return true;
}


function hideList() {
    $("div[targetId]").find("div").slideUp('0.6');
}
function showList() {
    $("div[targetId]").find("div").slideDown('0.6');
}

 

 ---------------------------------------

 

html代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .selcolor
        {
            background-color: #FFFF99;
        }
        ul
        {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 13px;
        }
        .floatdiv
        {
            background-color: White;
            position: absolute;
            z-index: 1000;
            width: 100%;
            border: solid 1px #ACA899;
            height: 200px;
            overflow: auto;
            display: none;
        }
    </style>

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="json_autofill.js"></script>

</head>
<body>
    <div style="width: 200px; position:relative;" targetid="Text1" geturl="Handler.ashx" itembgcolor="selcolor">
    </div>
</body>
</html>