（原创）jquery插件-可选可填控件

Posted 2020-06-28 行路者

;(function ($) {
    $.fn.autoFillTextBox = function (options) {
        var defaults = {
            nShow: 5,                          //显示条数
            nLen:10,                           //结果显示字数
            url: "/handler/DataRequestHandler.ashx",   //请求数据的url
            inputCss: ‘autofillbox_input‘,          //输入框的样式
            containerCss:‘autofillbox_container‘,     //外层容器的样式
            selectCss:‘autofillbox_select‘,             //下拉列表的样式
            delay:500,                         //延时查询的间隔
            onSelected:function($container){},       //选择后触发的事件，供外部调用
            action:‘type‘,                      //请求的操作关键字
            action_name:‘SearchResource‘,           //请求的操作
            name_field:‘Name‘,                   //查询的名字（数据库中的名字字段）
            py_field:‘pinyin‘,                   //查询的拼音（数据库中的拼音字段）
            other_cond:{},                      //其他查询条件
            enable_fetch_more:true,                //是否启用查找更多
            do_fetch_more:function(token){},         //查找更多
            container_width:0,                    //输入框长度
            enable_blur:true,                           //是否允许文本框失去焦点的事件
        };
        var settings = $.extend(defaults, options);
        var token = 0;
        var mode = ‘‘;
        /*
         * 据配置项中的nLen来获取显示结果的缩写
         */
        function _getShortName(name){
           if (name == null)
              return "";
           if (name.length>settings.nLen)
              return name.substr(0, settings.nLen)+"...";
           else
              return name;
        }
        
        /*
         * 显示查询的结果
         */
        function _showResult($container, response) {
            $container.children(‘ul‘).remove();
            if ((response == null || response.length == 0) && !settings.enable_fetch_more)
               return;
            var $ul = $("<ul></ul>").addClass(settings.selectCss);
            $.each(response, function(ii, item) {
               $ul.append("<li id=‘"+item.id+"‘ title=‘"+item.name+"‘ data-fullname=‘"+item.name+"‘><a style=‘text-decoration:none‘>" + _getShortName(item.name) + "</a></li>");
            })
            
            if (settings.enable_fetch_more){
               $ul.append("<a class=‘fetch_more‘ style=‘text-decoration:none;cursor:pointer‘><<<查找更多数据>>></a>")
            }
            
            $container.append($ul);
            $ul.slideDown(‘slow‘);
            
            $ul.on(‘click‘, ‘li‘, function(){//TODO 此处为啥用delegate没效果
               var $container = $(this).parent().parent();
            _readMode($(this));       
            settings.onSelected($container);
         });
         
         $ul.on(‘click‘, ‘.fetch_more‘, function(){
            settings.do_fetch_more(token);
                mode = ‘fetch_more‘;
         })
         
        };
        
        /*
         * 编辑模式
         */
        function _editMode($img){
           var $container = $img.parent();
         _initInput($container);    
        }
        
        /*
         * 只读模式
         */
        function _readMode($li){
           var $container = $li.parent().parent();
           var val = $li.attr(‘data-fullname‘);
           var id = $li.attr(‘id‘);
           _initLabel($container, id, val);
        }
        
        /*
         * 撤销编辑
         */
        function _redo($img){
           var $container = $img.parent().parent();
         _initLabel($container);       
        }

      /*
       * 执行查询
       */
        function _doSearch() {
            var val = $(this).val();
            if (val == ‘‘)
               return;
            var $container = $(this).parent();
            var condition = {
               nameField:settings[‘name_field‘],
               pyField:settings[‘py_field‘],
               key:val,
               maxItem:settings.nShow
            };
            condition[settings[‘action‘]] = settings[‘action_name‘];
            $.extend(condition, settings.other_cond);
            $.getJSON(settings.url, condition)
                .done(function (response) {
                    _showResult($container, _formatResponse(response))
                })
                .fail(function (response) {
                    console.log(response);//ToDo 此处应该显示错误信息，并在1s后自动消失
                })
        };

        /*
        规范化response，因为有的是返回model数组，有的是返回dataset
         */
        var _formatResponse = function(response){
            if ($.isArray(response)) {
                return response;
            }else if (response.hasOwnProperty(‘ds‘)){
                return response.ds;
            }else{
                return [];
            }
        }

      /*
       * 延时查询
       * 基本思路是，每次用户触发查询时，会重置定时器。若在定时器触发之前用户无再输入，则执行查询
       */
        var _delayCall = (function() {
            var timer = null;
            return function (fn, delay, $input) {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.call($input);//使用call可以将input带入给_search函数
                }, delay);
            };
        })();
        
        /*
         * 初始化显示结果的标签
         */
        function _initLabel($container, id, val){
            mode = ‘read‘;
           if (id == undefined && val == undefined){
              id = $container.attr(‘data-id‘);
              val = $container.attr(‘data-val‘);
           }else{
              $container.attr({‘data-id‘:id, ‘data-val‘:val});   
           }
           $container.children().remove();
           $container.append("<span title=‘"+val+"‘ style=‘width:85%‘>"+_getShortName(val)+"</span><img title=‘编辑‘ src=‘/Images/icons/page_white_edit.png‘/>");
           $container.undelegate(‘img‘, ‘click‘);
            $container.delegate(‘img‘, ‘click‘, function () {
                _editMode($(this));
            });
        }
        
        /*
         * 显示撤销按钮
         */
        function _showReDo($container){
           if ($container.find(‘img‘).length>0)
              return;
           $container.children(‘input‘).after("<a class=‘autofillbox_button‘><img title=‘撤销‘ src=‘/Images/icons/back.gif‘ /></a>");
           $container.undelegate(‘img‘, ‘click‘);
            $container.delegate(‘img‘, ‘click‘, function () {
                _redo($(this));
            });
        }

      /*
       * 初始化输入的文本框
       */
        function _initInput($container) {//初始化输入框
            mode = ‘write‘;
           $container.children().remove();
            if ($container.children().length == 0) {
               var $input = $(‘<input type="text" class="‘ + settings.inputCss + ‘" id="autofilltextbox_x"/>‘);
               var val = $container.attr(‘data-val‘);
               $input.val(val);
                $container.append($input);
            }
            $container.undelegate(‘input‘, ‘keyup‘);
            $container.delegate(‘input‘, ‘keyup‘, function () {
                _delayCall(_doSearch, settings.delay, this);
            });
            $container.undelegate(‘input‘, ‘click‘);
            $container.delegate(‘input‘, ‘click‘, function () {
                _doSearch.call(this);
            });

            if (settings.enable_blur){
                $container.undelegate(‘input‘, ‘blur‘);
                $container.delegate(‘input‘, ‘blur‘, function () {
                    var val = $(this).val();
                    setTimeout(function () {
                        _setValue($container, ‘‘, val);
                    }, 250);
                });
            }

            _showReDo($container);
            return $container;
        }
       
           /*
            * 初始化容器
            */
        function _initContainer($container) {//初始化外框CSS
//       $container.css({‘position‘:‘relative‘}).addClass(settings.containerCss);
         $container.addClass(settings.containerCss);
         $container.attr({‘data-id‘:‘‘, ‘data-val‘:‘‘});
         if (settings.container_width > 0){
            $container.width(settings.container_width);
         }
         var t = new Date();
         token = t.getTime();
              $container.attr(‘data-token‘, token);//生成控件的唯一标识
         return $container;
      }

        function _setValue($container, id, val){
            if (mode != ‘write‘)
                return;
            $container.attr({‘data-id‘:id, ‘data-val‘:val});
            _initLabel($container, id, val);
        }
        
        /*
         * 初始化控件
         */
        this.each(function () {
            var _this = $(this);
            _this = _initContainer(_this);//初始化外框CSS
            _this = _initInput(_this);//初始化输入框
        });
        
//-------------------------------------------公有方法----------------------------------------------------
        /*
         * 获取控件的token（唯一标识）
         */
        this.getToken = function(){
//         return $(this).attr(‘data-token‘);
         return token;
        };
        
        /*
         * 设置其他查询条件
         */
        this.setOptions =function(options){
           $.extend(true, settings, options);//$.extend的第一个参数决定了是否深度拷贝，否则other_cond就会被新的options覆盖
        };
        
        /*
         * 清理选择结果
         */
        this.clear = function(){
         var $container = $(this);
         $container.attr({‘data-id‘:‘‘, ‘data-val‘:‘‘});
         _initInput($container);    
        };
        
        this.setValue = function(id, val, triggerSelect){
           var $container = $(this);
           //$container.attr({‘data-id‘:id, ‘data-val‘:val});
           //_initLabel($container, id, val);
            _setValue($container, id, val);
           if (triggerSelect){
              settings.onSelected($container);
           }
        };
        
        this.getSettings = function(){
           return settings;
        };
        
        return this;
        
    }
})(jQuery);