顯示Select2值不在列表中

雖然可以使用createSearchChoice將新值添加到Select2（3.5）元素，但如果它不在列表中，如何獲得顯示的新值？我可以在Select2列表中不添加值，但是如何顯示不在列表中的默認值？顯示Select2值不在列表中

$("#select").select2({ 
    placeholder: "Who is the invoice from?", 
    minimumInputLength: 2, 
    quietMillis: 300, 
    allowClear : true, 
    ajax: { 
     url: "accountsDataStore.xsp", 
     dataType: 'json', 
     data: function (term, page) { 
      return { 
       q: term, // search term 
       page_limit: 10 
      }; 
     }, 
     results: function (data, page) { return data; } 
    }, 

    // extra code to allow entering value not in list 
    id: function(object) { return object.text; }, 

    //Allow manually entered text in drop down. 
    createSearchChoice:function(term, data) { 
         if ($(data).filter(function() { 
            return this.text.localeCompare(term)===0; 
           }).length===0) { 
             return {id:term, text:term}; 
         } 
    }, 

    initSelection: function(element, callback) { 
         //sets a default value (if a value was selected previously) 
         //get the existing value 
         var id = $(element).val(); 

         //if a value was selected: perform an Ajax call to retrieve the text label  
         if (id !== "") { 
          $.ajax( 
           "accountsDataStore.xsp", { 
            data: { id: id }, 
            dataType: "json" 
           }).done(function(data) { 
             // ** TODO if value not found, display current element value -- HOW?? ** 
             callback(data); }); 
         } 
        } 

    }).on('change', function (evt) { 
           // Do something after value changes 
           } 
);

在initSelection，如果找不到默認值，然後如何顯示當前值？

<input type="hidden" 
     id="view:_id1:_id4:callback1:inputName" 
     name="view:_id1:_id4:callback1:inputName" 
     aria-required="true" 
     value="ACME Company" 
     tabindex="-1" 
     class="select2-offscreen">

在形式中，值被設置，它只是沒有在出現一個選定值的<span>顯示。我們只是以某種方式將它添加到列表中？

謝謝。

來源

2016-11-17 teleman

我個人通過正確使用視圖控制器（viewScoped bean）來處理允許值不在列表中的select2元素，如下所示。

用下面的代碼我做3兩件事：

<xp:comboBox id="comboDemo" value="#{ctrl.comboValue}" validator="#{ctrl.validateCombo}"> 
    <xp:selectItems value="#{ctrl.comboChoices}" /> 
</xp:comboBox>

我綁定值的組合
我要確保已創建和選擇客戶端的任何新的選項被接受
我加載默認選擇爲組合框

默認的選擇是建立保持考慮當前的微博價值，除非它是null。

public List<SelectItem> getComboChoices() { 
    if (comboChoices == null) { 
     comboChoices = new ArrayList<SelectItem>(); 

     // Complete with your own logic here 
     if (StringUtil.isNotEmpty(comboValue)) { 
      comboChoices.add(new SelectItem(comboValue, comboValue)); 
     } 
    } 

    return comboChoices; 
}

一旦選擇了一個新值，我需要確保它將被接受回到服務器。我利用驗證階段潛入新的價值。

public void validateCombo(FacesContext facesContext, UIComponent component, Object value) { 
    boolean isNewValue = true; 

    for (SelectItem item : comboChoices) { 
     if (value.equals(item.getValue())) { 
      isNewValue = false; 
      break; 
     } 
    } 

    if (isNewValue) { 
     String newValue = (String) value; 
     comboChoices.add(new SelectItem(newValue, newValue)); 
    } 
}

以上是我所做的一個簡單的版本。你可以讓它更聰明，但我希望這個例子足夠清晰。

來源

2016-12-23 15:03:41 shillem

顯示Select2值不在列表中

回答

相關問題