欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-19 15:20:25
代码如下: /*文本自动补全 zhouxiang*/   (function ($) {     $.completion =...

代码如下:


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