我正在使用jQuery TextExt插件(http://textextjs.com/)创建一个输入字段,用户可以在其中输入语言作为标签,类似于Facebook输入标签的方式。
总的来说,该插件效果很好。
然而,我遇到了一个障碍,我似乎无法克服。我在输入字段上使用TextExt,如下所示:
<script type="text/javascript">
$('#id_languages').textext({
plugins : 'tags prompt suggestions arrow autocomplete',
tagsItems : ['English'],
suggestions : languages, //variable set earlier
prompt : 'Add more here...',
});
</script>
哪个有效。现在,我添加的标签越多,输入字段就越多(正如预期的那样)。
但是,在某些时候,它会超出我给定布局中可接受的高度。
是否有一种使用TextExt指定输入元素最大高度的工作方式,加上添加垂直滚动条,而没有使用滚动条在div中弹出“建议”下拉列表?
我希望这是有道理的,我现在有点困惑。
答案 0 :(得分:1)
我已经检查了源代码,并且没有地方可以更改它以便在没有黑客的情况下完成您的需要。
最接近的答案是限制每个输入的标签数量,这可以是 完成如下所述:How to limit total number of inputs to textExt plugin?
$('#id_languages').textext({
plugins : 'tags autocomplete',
tagsItems : Sourcearray,
ext: {
tags: {
addTags: function(tags) {
if(checkLength()) {
$.fn.textext.TextExtTags.prototype.addTags.apply(this, arguments);
}
}
}
}
});
这里是验证函数checkLength()
:
function checkLength(){
if($("#id_languages").next().children().length < 4){
return true;
}
return false;
}
其中数字4是允许的标签数量。
如果这不满意,您将不得不入侵textext.core.js
和textext.plugin.tags.js
并寻找以下功能:
invalidateBounds()
,preInvalidate()
和postInvalidate()
并使用高度操作。