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


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 confirm选择判断
Oct 18 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
深入浅析vue全局环境变量和模式
Apr 28 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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
基于php缓存的详解
2013/05/15 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python轻松实现代码编码格式转换
2015/03/26 Python
python读取excel表格生成erlang数据
2017/08/26 Python
对python3新增的byte类型详解
2018/12/04 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
为什么是 Python -m
2020/06/19 Python
python zip()函数的使用示例
2020/09/23 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
仓库管理制度
2014/01/21 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
党支部书记岗位职责
2015/02/15 职场文书
中学校园广播稿
2015/08/18 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js