我有两个输入。
我希望两个输入具有相同的外观和感觉,如下所示:
第一个输入使用自动完成并允许用户选择术语列表=>我使用p:自动完成 (see 关于自动完成的 Primefaces 文档)
这个输入效果很好。
对于第二个输入,我希望有相同的显示,但没有任何自动完成功能:用户只需输入一个术语列表,根本没有自动完成功能。
我尝试使用假自动完成来返回用户给出的值,但它太慢,并且当用户退出输入时行为不正确。
欢迎任何想法。
快速浏览后自动完成的 PrimeFaces javascript 代码经过几个小时的试验,我想出了一个解决方案。它涉及重写bindKeyEvents并决定是否调用原始事件,添加对空格键的检测(“选择一个标签”),并在按下时添加标签并触发selectionEvent(如果使用ajax)。将以下代码放入您的页面或外部 javascript 文件中
<script>
//<![CDATA[
if(PrimeFaces.widget.AutoComplete) {
PrimeFaces.widget.AutoComplete = PrimeFaces.widget.AutoComplete.extend ( {
bindKeyEvents: function() {
if (this.input.attr('data-justTags')) {
var $this = this;
this.input.on('keyup.autoComplete', function(e) {
var keyCode = $.ui.keyCode,
key = e.which;
}).on('keydown.autoComplete', function(e) {
var keyCode = $.ui.keyCode;
$this.suppressInput = false;
switch(e.which) {
case keyCode.BACKSPACE:
if ($this.cfg.multiple && !$this.input.val().length) {
$this.removeItem(e, $(this).parent().prev());
e.preventDefault();
}
break;
case keyCode.SPACE:
if($this.cfg.multiple) {
var itemValue = $this.input.val();
var itemDisplayMarkup = '<li data-token-value="' +itemValue + '"class="ui-autocomplete-token ui-state-active ui-corner-all ui-helper-hidden">';
itemDisplayMarkup += '<span class="ui-autocomplete-token-icon ui-icon ui-icon-close" />';
itemDisplayMarkup += '<span class="ui-autocomplete-token-label">' + itemValue + '</span></li>';
$this.inputContainer.before(itemDisplayMarkup);
$this.multiItemContainer.children('.ui-helper-hidden').fadeIn();
$this.input.val('').focus();
$this.hinput.append('<option value="' + itemValue + '" selected="selected"></option>');
if($this.multiItemContainer.children('li.ui-autocomplete-token').length >= $this.cfg.selectLimit) {
$this.input.css('display', 'none').blur();
$this.disableDropdown();
}
$this.invokeItemSelectBehavior(e, itemValue);
}
break;
};
});
} else {
//console.log("Original bindEvents");
this._super();
}
}
});
}
//]]>
</script>
为了决定何时调用原始属性,我决定使用 passThrough 属性和data-justTags
姓名。例如pt:data-justTags="true"
(值并不重要,所以pt:data-justTags="false"
与pt:data-justTags="true"
)。一个小的 html 片段是:
<p:autoComplete pt:data-justTags="true" multiple="true" value="#{myBean.selectedValues}">
并且不要忘记添加xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
命名空间声明。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)