목록에 Select2 값이 표시되지 않습니다.

Question

createSearchChoice를 사용하여 Select2 (3.5) 요소에 새 값을 추가 할 수 있지만 목록에없는 경우 새 값을 표시하려면 어떻게해야합니까? Select2 목록에없는 값을 추가 할 수는 있지만 목록에없는 기본값은 어떻게 표시됩니까? 기본값이 발견되지 않는 경우 initSelection 동안

$("#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 
           } 
); 

, 다음 에서는 현재 값을 표시하려면? 형태

<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>에 표시하지 않는 경우, 설정된다. 어떻게 든 목록에 추가합니까?

감사합니다.

Answer 1

저는 뷰 컨트롤러 (viewScoped bean)의 적절한 사용을 통해 다음과 같이 목록에없는 값을 허용하는 select2 요소를 직접 처리합니다.

내가 만든 클라이언트 쪽을 선택한 새로운 옵션이

을 받아됩니다 있는지 확인

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

1. 나는 콤보의 값을 바인딩 : 다음 코드와

   나는 3 일을

2. 콤보 박스의 기본 선택 항목을로드합니다.

기본 선택 사항은 현재 보 und 값인 경우가 아니면 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)); 
    } 
} 

위의 내용은 내가하는 일에 대한 멍청한 다운 버전입니다. 당신은 그것보다 더 똑똑하게 만들 수 있지만 나는 그 모범이 충분히 명확 해 졌으면 좋겠다.