• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 文本框文本自动补全效果示例分享

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了自动补全等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

(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);

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-16jQuery实现页面内锚点平滑跳转特效的方法总结
  • 2017-08-16一个简单的动态加载js和css的jquery代码
  • 2017-08-16基于PHP和Mysql相结合使用jqGrid读取数据并显示
  • 2017-08-1633个优秀的jQuery 教程分享(幻灯片、动画菜单)
  • 2017-08-16jQuery遍历节点树方法分析
  • 2017-08-16jQuery查找节点方法完整实例
  • 2017-08-16jQuery实现加入收藏夹功能(主流浏览器兼职)
  • 2017-08-16jQuery实现手机自定义弹出输入框
  • 2017-08-16基于jQuery的Spin Button自定义文本框数值自增或自减
  • 2017-08-16基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery tools 系列 scrollable学习
    • 优化Jquery,提升网页加载速度
    • 分享jQuery插件的学习笔记
    • jQuery Masonry瀑布流插件使用方法详解
    • jQuery通过deferred对象管理ajax异步
    • jquery如何判断表格同一列不同行input数据是否重复
    • 基于jQuery实现左右图片轮播(原理通用)
    • 浅析jQuery Mobile的初始化事件
    • 用jQuery中的ajax分页实现代码
    • jquery ajax 简单范例(界面+后台)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有