js插件自动完成

　　最近一直在搞cordova,没来的及更新博客。最近写了个项目里经常用到的组件，贴出来大家一起研究进步。

　　

   

功能比较普通，但是够用了。贴一下代码。

define([],function(){
    'use strict';

    var inputBlock = function(params){
        this.el = params.el;
        this.delimiter = /[;,；，]/gi;
        this.el.empty();
        this.el.append('<div id="nameCards" class="name-cards"></div><input id="inputText" class="input-text" type="text" value="请输入信息" />');
        this.input = this.el.find('#inputText');
        this.nameCards = this.el.find('#nameCards');
        this.lastLineTop = 0;
        this.maxNum = params.maxNum || 20;
        this.reg = params.reg || "";
        this.valueList = [];
        this.data = params.data || "";
    }
    inputBlock.prototype = {
        render : function(){
            var _this = this;
            _this.initData();
            _this.inputWidth = _this.el.width() - 40;
            _this.input.css({
                width : _this.inputWidth,
                padding : 0
            });
            _this.events();

        },
        events : function(){
            var _this = this;
            _this.input.bind('keydown',function(e){
                if(e.keyCode == 13 || e.keyCode == 32){
                    var names = _this.getNameList(),
                        len = names.length;
                    if(len){
                        for(var i = 0;i<len;i++){
                            names[i] && _this.addCard({
                                id : "card-" + parseInt(Math.random() * Math.pow(10, 10) + 1),
                                name : names[i]
                            });
                        }
                    }
                }
                if(8 == e.keyCode && _this.input.val() == "" && $(".share-name-item").length > 0){
                    _this.removeCard({elem : $(".share-name-item").last()})
                }
            }).bind("focus", function () {
               _this.input.val("");
               _this.input.css("color", "#333")
            }).bind('blur',function(e){
                _this.input.val("")
            })
            _this.el.bind("click", function () {
                _this.input.val("").focus();
                _this.el.addClass("focus");
            })
            $(document).on("click",".remove-name" ,function (e) {
                e.preventDefault();
                e.stopPropagation();
                return _this.removeCard({
                    elem : $(this).closest(".share-name-item")
                })
            })
            $(document).on('click','.share-name-item',function(e){
                e.preventDefault();
                e.stopPropagation();
                var el = $(this).find('span[class=name]'),
                    text = el.text(),
                    inputTxt = '<input type="text" style="height:18px;border:none;margin0px;padding:0px;" value="'+text+'"/>';
                el.html('').append(inputTxt);
                var input = el.find('input');
                input.bind('keydown',function(e){

                    if(e.keyCode == 13 || e.keyCode == 32){
                        var names = _this.getNameList(input),
                            len = names.length;
                        if(len){
                            for(var i = 0;i<len;i++){
                                names[i] && _this.addCard({
                                    id : "card-" + parseInt(Math.random() * Math.pow(10, 10) + 1),
                                    name : names[i],
                                    index : input.closest('.share-name-item').index()
                                });
                            }
                        }
                    }
                });
                input.focus();
            })
        },
        addCard : function(par){
            var _this = this,
                id = par.id ? 'id="' + par.id + '"' : "",
                card = $('<a class="share-name-item" ' + id + ' href="javascript:;" hidefocus="hideFocus" uname="' + par.name + '"><span class="name">' + par.name + '</span><span class="remove-name"></span></a>');
            //添加验证规则和个数限制
            if(_this.maxNum < $('.share-name-item').length + 1){
                alert("超出了最大限制，只能添加"+_this.maxNum + "个");
                _this.input.click();
                return false;
            }
            if(_this.reg && !_this.reg.test(par.name)){
                alert("输入的格式有误，请重新输入");
                return false;
            }
            if(par.hasOwnProperty('index')){
                var elem = $('.share-name-item').eq(par.index),
                    val = elem.find('input').val()
                    elem.find('span[class=name]').html(val);
                _this.valueList[par.index] = val;

            }else{
                _this.nameCards.append(card);
                _this.valueList.push(par.name);
            }

            _this.input.val("").focus();
            _this._reSize();
        },
        getNameList : function (input) {
            var _this = this;
            return $.trim(input ? input.val() : _this.input.val()).split(_this.delimiter)
        },
        removeCard : function(par){
            var _this = this,
                el = par.elem;
                el.remove();
            _this.valueList.pop();
            _this._reSize();
        },
        _getPosition : function () {
            if (!$(".share-name-item").length)
                return !1;
            var el = $(".share-name-item").last(),
                pos = el.position();
            return {
                left : pos.left,
                width : $(el).width()
            }
        },
        _reSize : function () {
            var _this = this,
                pos = _this._getPosition();
            if (pos) {
                var a = pos.left + pos.width +12;
                a + 50 > _this.inputWidth && (a = 3)
            } else
                var a = 3;
            _this.input.width(_this.inputWidth - a);
        },
        getValue : function(){
            return this.valueList;
        },
        getValueStr : function(){
            return this.valueList.join(",")
        },
        initData : function(){
            var _this = this,
            tempData = $.trim(_this.data).split(_this.delimiter),
            i = 0,len = tempData.length;
            for(;i<len;i++){
                _this.addCard({name : tempData[i]});
            }
        }
    }
    return inputBlock;
});