這篇文章主要介紹了jquery實現文本框的文本自動補全效果,大家參考使用吧
代碼如下: /*文本自動補全 zhouxiang*/ (function ($) { $.Completion = function (setting) { var opts = $.extend({}, $.Completion.DefaultSetting, setting); //寬度 var Completion_Width = null; //高度 var Completion_Height = null; //數據源(ashx)訪問路徑 var Completion_Data_Url = null; //對象 var Completion_Obj = null; var Completion_Obj_Show = null; //對象距離左邊距 var Completion_Obj_MarginLeft = null; //對象距離上邊距 var Completion_Obj_MarginTop = null; //對象高度 var Completion_Obj_Height = null; //分類 var Completion_Count = null; // var Completion_Type_obj = null; //內容 var Completion_Value = null; //類型 var Completion_Type = null; //是否傳入類型 var Completion_Bool = false; //計數 var Completion_N = 0; //回車回調 var Completion_ClickCall = null; //加載 function Completion_Loading() { //初始化 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() { //是否開啟類型判斷 if (Completion_Bool) { Completion_Type = Completion_Type_obj.val(); } Completion_Value = Completion_Obj.val(); Completion_Value = Completion_Value.replace(" ", ""); //執行驗證 Completion_Verification(Completion_Value); if (Completion_Value.length > 1) { //得到數據 構造HTML Completion_Data_Bind(); } else { Completion_Obj_Show.hide(); } } //驗證 function Completion_Verification(obj) { if (obj == "" || obj == null || obj == undefined) { return false; } } //執行AJAX請求 得到數據 function Completion_Data_Bind() { $.ajax({ url: Completion_Data_Url, data: { CompletionValue: Completion_Value, CompletionCount: Completion_Count, CompletionType: Completion_Type }, type: "post", dataType: "json", success: function (obj) { //構造HTML 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; ComPletionName = ComPletionName.replace(Completion_Value.toUpperCase(), "<span class='c-hover'>" + Completion_Value.toUpperCase() + "</span>"); ComPletion_Li += "<li><a href='javascript:;'><span class='c-total'>約" + dr.ComPletion_Count + "條記錄</span><ul>" + ComPletionName + "</ul></a></li>"; } if (ComPletion_Li != "") { var Completion_Html = "<ul style='list-style-type:none;'>" + ComPletion_Li + "</ul>"; 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 });