オートコンプリートなしのタグで複数入力

Question

2つの入力があります。

私は同じ外観を持ち、以下を参照してください感じるには、2つの入力をしたい：私はPを使用> =最初の入力用の自動補完

を、ユーザーが用語のリストを選択することができます：オートコンプリート（Primefaces documentation on autocompleteを参照） この入力は問題ありません。

2回目の入力では、同じ表示ができますが、オートコンプリートは使用しません。ユーザーはオートコンプリートなしでタームのリストを入力するだけです。 ユーザーが指定した値を返す偽のオートコンプリートを作成しようとしましたが、ユーザーが入力を終了したときに動作が遅すぎ、正しく動作しません。

ご了承ください。

Answer 1

私は仕事をすることができコンポーネントが見つかりました：PrimeFaces javascript code of the autoCompleteで簡単に見、それを試して数時間後にhttp://www.butterfaces.org/tags.jsf

Answer 2

を、私は解決策を思い付きました。これは、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名前のパススルー属性を使用することにしました。例えば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"名前空間宣言を追加することを忘れないでください。