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

代码如下:

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

赞 (0)

相关推荐

  • Python 自动补全(vim)

    Python 自动补全(vim)

    一.vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.python 模块内函数,变量补全 5.from module import sub-module 补全 想为vim启动自动补全需要下载插件,地址如下: http://vim.sourceforge.net/scripts/script.php?script_id=850 https://github

  • 给Python IDLE加上自动补全和历史功能

    许多时候,我们使用Python,并不用写一个程序,一些不复杂的任务,我更喜欢在 IDLE(也就是交互式提示模式)下输入几行代码完成.然而,在这个模式下编辑代码,也有不够便利的地方,最主要的就是,不能用Tab自动补全,不能记忆 上一次输入的命令(没办法,谁让我们在Shell下习惯了呢). 这时候,我们可以直接使用Python启动脚本,解决这个问题. 启动脚本的程序非常简单,这里不多说明,只给出代码: import readline import rlcompleter import atexit

  • JSP + ajax实现输入框自动补全功能 实例代码

    JSP + ajax实现输入框自动补全功能 实例代码

    下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();

  • php使HTML标签自动补全闭合函数代码

    简单解释一些代码: 第一个 ~(<[^>]+?>)~si 这个正则是匹配<--->中的内容.简单说是所有的<标签>. 第二个 ~<([a-z0-9]+)[^/>]*?/>~si 这个正则是匹配<--/>中的内容.是单闭合标签 如<br /> 第三个 ~</([a-z0-9]+)[^/>]*?>~si 这个正则是匹配</......>中的内容.也就是结束标签 如</a> 第四个 ~&

  • jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

    autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能 效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回 搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码 代码如下: using System.Coll

  • 让 python 命令行也可以自动补全

    许多人都知道 iPython 有很好的自动补全能力,但是就未必知道 python 也同样可以 Tab 键补全, 您可以在启动 python 后,执行下 复制代码 代码如下: import readline, rlcompleter; readline.parse_and_bind("tab: complete") 这就可以按 Tab 键补全了. python 自启动 如果您嫌每次都要键入这东西麻烦的话,可以把上边这行写到 ~/.pythonstartup.py , 再 ~/.bashr

  • PHP+jQuery实现自动补全功能源码

    前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须

  • jquery实现邮箱自动补全功能示例分享

    复制代码 代码如下: (function($){    $.fn.autoMail = function(options){         var autoMail = $(this);         var _value   = '';         var _index   = -1;         var _width   = autoMail.outerWidth();         var _height  = autoMail.outerHeight();        

  • Python实现Tab自动补全和历史命令管理的方法

    本文实例讲述了Python实现Tab自动补全和历史命令管理的方法.分享给大家供大家参考.具体分析如下: Python的startup文件,即环境变量 PYTHONSTARTUP 对应的文件 1. 为readline添加tab键自动补全的功能 2. 像Shell一样管理历史命令 代码如下: 复制代码 代码如下: import rlcompleter import readline import atexit import os # http://stackoverflow.com/question

  • Android实现登录邮箱的自动补全功能

    Android实现登录邮箱的自动补全功能

    本文实例为大家分享了Android登录邮箱自动补全功能的实现方法,供大家参考,具体内容如下 效果: 实现原理: 1.继承重写简单控件AutoCompleteTextView 2.编写自定义数据适配器和布局文件,并实现文字变化监听器 3.通过组合方式,实现右侧的删除图标.并根据焦点和文字的变化,动态显示右侧删除图标. 1.通过继承自简单控件AutoCompleteTextView实现帐号自动补全 关键代码: public class AutoComplete extends AutoComplet

随机推荐