当前位置:  编程技术>WEB前端

文本框文本自动补全效果示例分享

    来源: 互联网  发布时间：2014-08-25

    本文导语:  代码如下:/*文本自动补全 zhouxiang*/ (function ($) {    $.Completion = function (setting) {        var opts = $.extend({}, $.Completion.DefaultSetting, setting);        //宽度        var Completion_Width = null;        //高度        var Completi...

代码如下:

/*文本自动补全 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(), "" + 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 });

        
     
     

    您可能感兴趣的文章:

  • html5/css3文本阴影(text-shadow)详解及示例
  • jquery教程限制文本框只能输入数字和小数点示例分享
  • android输入框与文本框加滚动条scrollview示例
  • jquery文本框回车与change事件示例
  • java实现文本文件删除空行的示例分享
  • python读取浮点数和读取文本文件示例
  • 使用pdfbox实现pdf文本提取和合并功能示例
  • python合并文本文件示例
  • jquery设置text的值示例(设置文本框 DIV 表单值)
  • 简单的用java实现读/写文本文件的示例
  • jQuery设置和获取HTML、文本和值示例
  • c#实现将pdf转文本的示例分享
  • c#文本加密程序代码示例
  • jQuery取得select选择的文本与值的示例
  • android界面布局之实现文本块布局效果示例
  • java实现查找文本内容替换功能示例
  • jQuery文本效果插件 Textualizer
  • jQuery实现textarea文本框半透明文本提示效果
  • JSP页面上用下横线代替文本框效果的代码
  • 文本框水印提示效果的简单实现代码
  • Android文本框搜索和清空效果实现代码及简要概述
  • CSS渐变文本效果的两种方法比较
  • css文本框与按钮美化效果代码
  • jQuery设置input文本框内灰色提示效果
    •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。












  • 相关文章推荐
  • C++ Strings(字符串) 成员 append():在字符串的末尾添加文本
  • 在AIX的tmp目录下面，有很多个文本文件，现在要把每个文本文件里的一些信息提取出来，放在一个文本文件里！
  • linux bash shell命令:grep文本搜索工具简介
  • jquery 文本框回车事件 跳到下一个文本框
  • HTML5 <bdo> 标签:覆盖默认的文本方向
  • 在文本控件jtextpane中如何把“选中文本”事件屏蔽？？
  • linux bash shell命令:文本搜索工具grep中用于egrep和 grep -E的元字符扩展集
  • 如何从文本文件每次读入一行然后处理直到文本结束
  • HTML5 <b> 标签-定义粗体的文本
  • 请问html中的文本输入框中如何实现静态的不可修改文本
  • CSS控制长文本内容显示(截取的地方用省略号代替)
  • 能否在输入两个文本框时，第三个文本框自动等于前者之和
  • linux bash shell命令:文本搜索工具Grep命令选项及实例
  • 用word2000将文档存为纯文本文件，所得文本文件不满足AScii标准？请教。
  • windows/windows 7/windows 8 下打开查看、修改及保存超大(GB级)文本文件及其它类型文件的工具-PilotEdit
  • 请问UNIX下的文本格式和DOS下的文本格式有什么区别呀？
  • linux bash shell命令:文本搜索工具grep正则表达式元字符集（基本集）
  • 用户无法设定默认的系统文本编辑器。本地管理员如何协助该用户确定系统默认的文本编辑器？
  • HTML 文本格式化标签大全
  • 如何用Linux中的文本编辑工具提取文本文件中的指定内容？
  • HTML超文本标记语言教程及实例
  • 给定开始和结束行，怎么从一个文本文件中提取一段文本？


    • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3