输入多个不带自动完成的标签答案

【问题标题】：Input multiple with tags without autoCompletion输入多个不带自动完成的标签
【发布时间】：2017-01-30 19:32:14
【问题描述】：

我有两个输入。

我希望两个输入具有相同的外观和感觉，如下所示：

第一个输入使用自动完成并允许用户选择术语列表 => 我使用 p:autocomplete（请参阅Primefaces documentation on autocomplete）此输入工作正常。

对于第二个输入，我希望有相同的显示但没有任何自动完成功能：用户只需输入一个完全没有自动完成功能的术语列表。我试图让一个假的自动完成功能返回用户给定的值，但它太慢了，并且当用户退出输入时行为不正确。

欢迎提出任何想法。

【问题讨论】：

"。我尝试了一个虚假的自动完成功能，它返回用户给定的值，但速度太慢，并且当用户退出输入时行为不正确。" 为什么不发布您尝试过的代码并让我们看看呢？以minimal reproducible example格式发布代码

标签： jsf input primefaces autocomplete tags

【解决方案1】：

我找到了一个可以完成这项工作的组件：http://www.butterfaces.org/tags.jsf

【讨论】：

【解决方案2】：

在快速查看PrimeFaces javascript code of the autoComplete 并尝试了几个小时后，我想出了一个解决方案。它涉及覆盖 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>

为了决定何时调用原始属性，我决定使用带有 data-justTags 名称的 passThrough 属性。例如pt:data-justTags="true"（值无关紧要，所以pt:data-justTags="false" 与pt:data-justTags="true" 相同）。一个小的 html sn-p 是：

<p:autoComplete pt:data-justTags="true" multiple="true" value="#{myBean.selectedValues}">

不要忘记添加 xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" 命名空间声明。

【讨论】：