文字方塊文字自動補全效果範例分享_jquery

複製程式碼 程式碼如下:

/*文本自动补全 zhouxiang*/

(function ($) {
    $.Completion = function (setting) {
        var opts = $.extend({) 🎜>        var Completion_Width = null;
        //高度
               var Completion_Data_Url = null;
        //物件
var Completion_Obj = null;
        var Completion_Obj_Show = null;
        //物件距離       //物件距離上方距
        var Completion_Obj_MarginTop = null;
//物件高度
        var Completion_Obj_Height = null;
        //分類
          var Completion_Type_obj = null;
        //內容物
        Value = null;
        //類型
        var Completion_Type = null;
             //計數
        var Completion_N = 0;
        //回車回呼
               //初始化
            Init();
            //綁定事件
            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;

                }
                 function Cimpletion_Bind() {
            //是否開啟型態判斷
       Completion_類型 = Completion_Type_obj.val();
            }
          letion_Value = Completion_Value.replace(" ", "");
            //執行驗證
        (Completion_Value);
                Completion_Data_Bind();
            } else {
        }
        }
        //驗證
        function Completion_Verific ) {
        function Completion_Verificſ(obj) {                return false;
            }
        }
        //製作           $.ajax({
               url: Completion_Data_Url,               type: "post",                   Completion_Add_Html( }obj);
                }
                   function Completion_Selected(obj) {
            Completion_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;

pleastionName = ploteionname.replace（pleastion_value.touppercase（），" " postion_value.touppercase（)」li>約" dr.ComPletion_Count "筆記錄

" ComPletionName "

li>";
           _Li != " ") {
                     Completion_Obj_Html(Completion_Html);
               } else {
Completion_Obj_Show. hide();
                }
                  function MouseHover(obj) {
            Completion_Obj_Show .find("li").mouseover(function () {
                Completion_Obj_Show.find("li").find("a").remove j.val($(this).find("ul"). text());
               以定型_N = Completion_Obj_Show.find("li").index(this )  }
        // 綁定至控制項
       子Completion_Obj_Html(html ) {
            Completion_Obj_Show.show();
           Obj_Show.css({ "width": Completion_Width 6, "height": Completion_Height, "border" -寬度":" 1px ”，“邊框顏色”：“#CCC”，“邊框頂部寬度”：“0px”，“邊框樣式”：“實心”，“位置”：“相對”，“z-index”：“ 100000" } );
            Completion_Obj_Show.attr("class", "Completion-guess-list ");
          Completion_N = -1;
            Completion_Obj_Show.find( "li" }).unbind("click").click(function () {
                Completion_Selected ($(this));            Completion_物件顯示.click(function (e) {
                e.stopPropagation();
     bj.click(function (e) {
                Cimpletion_Bind();
         
            });
            $(文書).click  );
            });
        }
        //載入
        Completion_Loading .DefaultSetting = {
        Completion_Height: null,
        Completion_Data_Url: null,
        Completion_Obj: null,
      
        Completion_Count: 10,
        Completion_Type_obj: null,
     ;

})(jQuery);

複製代碼

代碼如下：body{      margin: 0;

    填入：0;

    }
.Completion-guess-list ul, li
{
    邊距： 🠎> 
}
.Completion-guess-list
{
    溢位：自動；
    字體大小：12px;
  # 高：180% ; 🎜>}
.Completion-guess-list a
{
    顏色: #555;
    文字裝飾: 無;    溢出：隱藏；
    空白：nowrap;
    font-family:Verdana,arial;
}
.Completion-guess-list a .c-right{flo-right ; }
.Completion-guess-list a:hover,.Completion-guess-list a.Completion-guess-list-hover
{
    背景: #3399ff;
    🎜>}
.Completion-guess-list a:hover span.c-total,.Completion-guess-list a.Completion-guess-list-hover span.c-total{顏色:# fff;}
.Completion-guess-list .c-hover{font-weight:700;}







複製程式碼


程式碼如下：


$.Completion({ Completion_Obj(Int(Obj(Input) ”），Completion_Data_Url：“/CompletionHandler.ashx”，Completion_Height：“自動”，Completion_Obj_Show：$（“#show”），Completion_Bool：true，Completion_Type_obj：$（“#Type”），Completion_Bool：true，Completion_Type_obj：$（“#Type”），Completion_CertCert（Completion” 1); }, 完成長度: 0 });