文本框文本自动补全效果示例分享_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_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                     //执行验证是否为空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 });