jq实现搜索引擎的提示效果

(function ($) {
    $.fn.Search = function (options) {
        var defaults = {
            inputid: "search",
            divid: "searchDiv",
            callback: function (pageindex) {
            }

        };

        var i = 0;
        var opts = $.extend(defaults, options);
        
        $("#" + opts.inputid).keyup(function (e) {
            e = e || window.event;
            if (e.keyCode != 40 && e.keyCode != 38 && e.keyCode != 13) {
                if ($("#" + opts.inputid).val() == "") {
                    $("#" + opts.divid).hide();
                    i = 0;
                } else {
                    var value = $("#" + opts.inputid).val();
                    $.ajax({
                        //提交方式为Get
                        type: "get",
                        //访问的handler地址   参数d=" + new Date()是为了防止缓存是他每次访问的参数不同
                        url: "/Common/SearchInfo",

                        //设置提交的参数
                        data: { name: value },
                        //提交的方式是json提交
                        dataType: "json",
                        //如果成功则得到返回的结果然后用javascript库中的each方法遍历返回的json集合
                        success: function (data) {
                            //用each遍历json集合
                            if (data != null) {
                                var html = "";
                                $.each(data, function (i, dataitem) {
                                    html = html + "<div style='cursor:hand' id='div" + i + "'  onmouseover='getBlue(this)'onmouseout='getWhite(this)' onclick='document.getElementById("search").value = this.innerText;$("#" + opts.divid + "").hide();i=0;'style='font-size:16px;padding-top:5px;padding-buttom:5px;'><span style='font-weight:bold'>" + dataitem.ComName.substring(0, value.length) + "</span><span>" + dataitem.ComName.substring(value.length, dataitem.ComName.length) + "</span></div>";
                                });
                                $("#" + opts.divid).html(html);
                                $("#" + opts.divid).show();
                            } else {
                                $("#" + opts.divid).html("");
                                $("#" + opts.divid).hide();
                            }
                        },
                        //如果失败的话则弹出错误提醒
                        error: function (data) {
                            $("#" + opts.divid).hide();
                            i = 0;
                        }
                    });
                }
            }

            if (e.keyCode == 40) {
                var divs = $("#" + opts.divid).find("div");
                if (divs.length == 1) {
                    divs[0].style.backgroundColor = "#e8e3e3";
                    return;
                }
                if ($.trim(i) == $.trim(divs.length)) {
                    divs[0].style.backgroundColor = "#e8e3e3";
                    $("#" + divs[0].id).siblings().css("backgroundColor", "white");
                    i = 0;
                } else {
                    divs[i].style.backgroundColor = "#e8e3e3";
                    $("#" + divs[i].id).siblings().css("backgroundColor", "white");
                }
                i = i + 1;
            }
            if (e.keyCode == 38) {
                var divs = $("#" + opts.divid).find("div");
                if (i == 0) {
                    i = divs.length;
                }
                if (divs.length == 1) {
                    divs[0].style.backgroundColor = "#e8e3e3";
                    return;
                }
                if ($.trim(i) >= 0) {
                    divs[i - 1].style.backgroundColor = "#e8e3e3";
                    $("#" + divs[i - 1].id).siblings().css("backgroundColor", "white");
                } else {
                    divs[i - 1].style.backgroundColor = "#e8e3e3";
                    $("#" + divs[i - 1].id).siblings().css("backgroundColor", "white");
                    i = 0;
                }
                i = i - 1;
            }
            if (e.keyCode == 13) {
                var divs = $("#" + opts.divid).find("div");
                for (var j = 0; j < divs.length; j++) {
                    if (divs[j].style.backgroundColor == "rgb(232, 227, 227)") {
                        var span = $("#" + divs[j].id).find("span");
                        var spanText = span[0].innerText + span[1].innerText;
                        $("#" + opts.inputid).val(spanText);
                        $("#" + opts.divid).hide();
                        i = 0; 
                    }
                } 
            }
        });
    };

})(jQuery);
function getBlue(obj) {
    obj.style.backgroundColor = "#e8e3e3";
}
function getWhite(obj) {
    obj.style.backgroundColor = "white";
}