输入多个带有标签的标签，而无需自动填充 [英] Input multiple with tags without autoCompletion

问题描述

我有两个输入.

我希望两个输入具有相同的外观，如下所示:

I want the two inputs to have the same look and feel see below:

第一个输入使用自动完成功能，并允许用户选择术语列表=>我使用 p:autocomplete (请参阅

The first input use autocomplete and allows the user to select a list of terms => I use p:autocomplete (see Primefaces documentation on autocomplete) This input works fine.

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

For the second input, I would like to have the same display but without any autocompletion : the user just enter a list of terms with no autocompletion at all. I tried to have a fake autocomplete that return the value given by the user but it is too slow and the behaviour is not correct when the user quit the input.

欢迎提出任何想法.

推荐答案

快速浏览

After a quick look at the PrimeFaces javascript code of the autoComplete and a few hours experimenting with it, I came up with a solution. It involves overriding the bindKeyEvents and in it deciding to call the original one or not, adding detection for the space key ('selecting a tag') and when pressed, add the tag and fire the selectionEvent (if ajax is used). Place the following code in your page or in an external javascript file

   <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片段是:

For deciding on when to call the original one or not, I decided to use a passThrough attribute with a data-justTags name. e.g. pt:data-justTags="true" (value does not matter, so pt:data-justTags="false" is identical to pt:data-justTags="true"). A small html snippet of this is:

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

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

And do not forget to add the xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" namespace declaration.

这篇关于输入多个带有标签的标签，而无需自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！