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


Posted in Javascript onJanuary 19, 2014
/*文本自动补全 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 });
Javascript 相关文章推荐
javascript标签在页面中的位置探讨
Apr 11 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 #Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 #Javascript
js取float型小数点后两位数的方法
Jan 18 #Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 #Javascript
js使用eval解析json实例与注意事项分享
Jan 18 #Javascript
收集json解析的四种方法分享
Jan 17 #Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 #Javascript
You might like
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
prototype 的说明 js类
2006/09/07 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python协程之动态添加任务的方法
2019/02/19 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python ini文件常用操作方法解析
2020/04/26 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
开办饭店创业计划书
2013/12/28 职场文书
小学生开学感言
2014/02/28 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
党性观念心得体会
2014/09/03 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
个人事迹材料范文
2014/12/29 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书