用自動完成標籤輸入多個

Question

我有兩個輸入。

我希望兩個輸入具有相同的外觀和感覺見下圖：

第一個輸入使用自動完成，並允許用戶選擇項的列表=>我用號碼：自動完成（請參閱Primefaces documentation on autocomplete） 此輸入正常工作。

對於第二個輸入，我想要有相同的顯示但沒有任何自動完成：用戶只需輸入一個沒有自動完成的術語列表。 我試圖讓一個虛假的自動完成返回用戶給出的值，但它太慢，當用戶退出輸入時行爲不正確。

任何想法是值得歡迎的。

Answer 1

我發現可以做的工作組件：http://www.butterfaces.org/tags.jsf

Answer 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名。例如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"命名空間聲明。