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