Text box text auto-complete effect example sharing_jquery

Copy code The code is as follows:

/*文本自动补全 zhouxiang*/

(function ($) {
$.Completion = function (setting) {
var opts = $.extend({}, $.Completion.DefaultSetting, setting);
//width
var Completion_Width = null;
var Completion_Height = null;
var Completion_Height = null;
var Completion_Data_Url = null;
//Object
var Completion_Obj = null;
var Completion_Obj_Show = null;
var Completion_Obj_Show = null;
var Completion_Obj_MarginLeft = null;
var Completion_Obj_MarginLeft letion_Obj_MarginTop = null;
//Object height
var Completion_Obj_Height = null;
//Category
var Completion_Count = null;
//
var Completion_Type_obj = null;
// Content
var Completion_Value = null;
                                                                                        use using using use using use using using using       out out out out out out out out out Out Out of ’ into ’’ ’     ’ ‐ ‐ ‐ ‐ ‐ down through-set to ​ to var Completion_N = 0; 🎜 >         // Enter callback
        var Completion_ClickCall = null;
                                                                                                                 // Enter callback 🎜> //Binding event
Completion_Obj_AddEvent();
}
        //初始化
        function Init() {
            Completion_Obj_Show = opts.Completion_Obj_Show;
            //获取对象
            Completion_Obj = opts.Completion_Obj;
            //获取对象宽度
            Completion_Width = Completion_Obj.width();
            //获取层显示高度
            Completion_Height = opts.Completion_Height;
            //获取访问数据库URL
            Completion_Data_Url = opts.Completion_Data_Url;
            //每次查询多少条记录
            Completion_Count = opts.Completion_Count;
            //获取对象高度
            Completion_Obj_Height = Completion_Obj.height();
            //获取左边距
            Completion_Obj_MarginLeft = Completion_Obj.offset().left;
            //获取上边距
            Completion_Obj_MarginTop = parseInt(Completion_Obj.offset().top) + parseInt(Completion_Obj_Height);
            Completion_Type_obj = opts.Completion_Type_obj;
            Completion_Bool = opts.Completion_Bool;
            Completion_ClickCall = opts.Completion_ClickCall;
        }
        //给对象添加事件
        function Completion_Obj_AddEvent() {
            Completion_Obj.keyup(function (event) {
                switch (event.keyCode) {
                    case 38:
                        break;
                    case 40:
                        break;
                    case 13:
                        Completion_ClickCall();
                        break;
                    default:
                        //按键事件 延迟操作

                        Cimpletion_Bind();
                        break;
                }

            });
            Completion_Obj.keydown(function (event) {
                switch (event.keyCode) {
                    case 13:
                        break;
                    case 38:
                        if (Completion_N == 0) {
                            Completion_N = (Completion_Obj_Show.find("li").length - 1);
                        } else if (Completion_N != 0) {
                            Completion_N = Completion_N - 1;
                        }
                        //alert(Completion_N);
                        Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                        Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");
                        Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());

                        break;
                    case 40:
                        if (Completion_N + 1 < Completion_Obj_Show.find("li").length) {
Completion_N = Completion_N + 1;
} else if (Completion_N + 1 == Completion_Obj_Show.find("li").length) {
Completion_N = 0;
}
Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
Completion_Obj.val(Completion_Obj_Show.find("li").eq(Completion_N).find("ul").text());
Completion_Obj_Show.find("li").eq(Completion_N).find("a").addClass("Completion-guess-list-hover");

break;
default:
break;

                                                                                                                                                            🎜>            if (Completion_Bool) {
Completion_Type = Completion_Type_obj.val();
}
Completion_Value = Completion_Obj.val();
Completion_Value = Completion_Value.replace(" ", "");
                                                                                                                                            use   using using use using using                                                     (Completion_Value);
                                                                                                                                                                {
Completion_Obj_Show.hide();
}
}
// Verify
Function Completing_verification (obj) {
if (obj == "" "|| Obj == NULL || Obj == Undefined) {
RETURN FALSE ;
                                                                                 url: Completion_Data_Url,
data: { CompletionValue: Completion_Value, CompletionCount: Completion_Count, CompletionType: Completion_Type },
type: "post",
dataType: "json",
success: function (obj) {
                                                                                                                                                                                                                                                        // Construct HTML
                       Completion_Add_Html (obj);
                                                                                     letion_Obj.val(obj.find("ul").text ());
Completion_Obj_Show.hide();
}
//构造内容
function Completion_Add_Html(obj) {
var data = obj.Completion_Data;
//执行验证
Completion_Verification(data);
var ComPletion_Li = "";
if (data != null && data != undefined) {
for (var i = 0; i < data.length; i++) {
//执行验证是否为空
var dr = data[i];
Completion_Verification(dr);
var ComPletionName = dr.ComPletion_Name;

                    ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "" Completion_Value.toUpperCase() "");
                    ComPletion_Li = "

约" dr.ComPletion_Count "条记录

" ComPletionName "

";
                }
                if (ComPletion_Li != "") {
                    var Completion_Html = "

" ComPletion_Li "

";
                    Completion_Obj_Html(Completion_Html);
                } else {
                    Completion_Obj_Show.hide();
                }
            }
        }
        //mouse
        function MouseHover(obj) {
            Completion_Obj_Show.find("li").mouseover(function () {
                Completion_Obj_Show.find("li").find("a").removeClass("Completion-guess-list-hover");
                Completion_Obj.val($(this).find("ul").text());
                Completion_N = Completion_Obj_Show.find("li").index(this);
            });
        }
        //绑定到控件
        function Completion_Obj_Html(html) {
            Completion_Obj_Show.show();
            Completion_Obj_Show.html("")
            Completion_Obj_Show.css({ "width": Completion_Width 6, "height": Completion_Height, "border-width": "1px", "border-color": "#CCC", "border-top-width": "0px", "border-style": "solid", "position": "relative", "z-index": "100000" });
            Completion_Obj_Show.attr("class", "Completion-guess-list");
            Completion_Obj_Show.html(html);
            Completion_N = -1;
            Completion_Obj_Show.find("li").unbind("click").click(function () {
                Completion_Selected($(this));
            });
            MouseHover($(this));
            Completion_Obj_Show.click(function (e) {
                e.stopPropagation();
            })
            Completion_Obj.click(function (e) {
                Cimpletion_Bind();
                e.stopPropagation();
            });
            $(document).click(function () {
                Completion_Obj_Show.hide();
            });
        }
        //加载
        Completion_Loading();
    };
    //默认配置
    $.Completion.DefaultSetting = {
        Completion_Height: null,
        Completion_Data_Url: null,
        Completion_Obj: null,
        Completion_Obj_Show: null,
        Completion_Bool: false,
        Completion_Count: 10,
        Completion_Type_obj: null,
        Completion_ClickCall: null
    };

})(jQuery);

复制代码 代码如下:

body
{
      margin: 0;
    padding: 0;
    }
.Completion-guess-list ul, li
{
    margin: 0;
    padding: 0;
    list-style:none;
}
.Completion-guess-list
{
    overflow: auto;
    font-size: 12px;
    line-height: 180%;
    background: #fff;
}
.Completion-guess-list a
{
    color: #555;
    text-decoration: none;
    display: block;
    padding: 1px 6px;
    overflow: hidden;
    white-space: nowrap;
    font-family:Verdana,arial;
}
.Completion-guess-list a .c-total{float:right;color:green;}
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
    background: #3399ff;
    color: #fff;
}
.Completion-guess-list a:hover span.c-total,.Completion-guess-list a.Completion-guess-list-hover span.c-total{color:#fff;}
.Completion-guess-list .c-hover{font-weight:700;}

复制代码 代码如下:

$.Completion({ Completion_Obj: $("#Input_Html"), Completion_Data_Url: "/CompletionHandler.ashx", Completion_Height: "auto", Completion_Obj_Show: $("#show"), Completion_Bool: true, Completion_Type_obj: $("#Type"), Completion_ClickCall: function () { alert(1); }, Completion_Length: 0 });