输入多个不带自动完成的标签 [英] Input multiple with tags without autoCompletion

问题描述

我有两个输入.

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

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

第一个输入使用自动完成并允许用户选择术语列表 => 我使用 p:autocomplete(请参阅 Primefaces 关于自动完成的文档)此输入工作正常.

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.

欢迎提出任何想法.

推荐答案

快速浏览一下PrimeFaces autoComplete 的 JavaScript 代码和几个小时的试验，我想出了一个解决方案.它涉及覆盖 bindKeyEvents 并决定是否调用原始事件，添加对空格键的检测(选择标签")，并在按下时添加标签并触发 selectionEvent(如果使用 ajax).将以下代码放在您的页面或外部 javascript 文件中

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 相同="真").一个小的 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屋！