您的位置:首页 > Web前端 > JavaScript

js插件自动完成

2015-12-07 20:47 786 查看
  最近一直在搞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;
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: