rich : 페이지의 자동 완성 나누기 스타일

Question

RichFaces 4.3.0.Final을 사용하는 프로젝트의 주소 자동 완성을 구현했습니다. rich:autocomplete 태그를 사용했습니다. 자동 완성 기능은 정상적으로 작동하지만 페이지 스타일이 깨졌습니다. 우리의 필드의 모양을 는 여기 같은 rich:autocomplete없이 : HTML을

<span id="manualEligibilityCheck:zipWrapper"> 
    <span id="manualEligibilityCheck:j_idt111"> 
     <script id="manualEligibilityCheck:j_idt111Script" type="text/javascript">new RichFaces.ui.Placeholder("manualEligibilityCheck:j_idt111", {"targetId":"manualEligibilityCheck:zip","text":" ZIP"});</script> 
    </span> 
    <input id="manualEligibilityCheck:zip" type="text" name="manualEligibilityCheck:zip" class="form-control rf-plhdr" autocomplete="off"> 
</span> 

을 그리고 여기 : 여기

는 HTML이 h:inputText에 대한 RichFaces에 의해 생성 된 것 : 여기이 자리에 태그로 보이는 방법

그리고 RichFaces에서 rich:autocomplete에 생성 :

<span id="manualEligibilityCheck:zipWrapper"> 
    <span id="manualEligibilityCheck:j_idt111"> 
     <script id="manualEligibilityCheck:j_idt111Script" type="text/javascript">new RichFaces.ui.Placeholder("manualEligibilityCheck:j_idt111", {"targetId":"manualEligibilityCheck:zip","text":" ZIP"});</script> 
    </span> 
    <span class="rf-au form-control" id="manualEligibilityCheck:zip"> 
     <input id="manualEligibilityCheck:zipValue" name="manualEligibilityCheck:zipValue" type="hidden"> 
     <span> 
      <input autocomplete="off" class="rf-au-fnt rf-au-inp rf-plhdr" id="manualEligibilityCheck:zipInput" name="manualEligibilityCheck:zipInput" type="text"> 
     </span> 
     <div class="rf-au-lst-cord" id="manualEligibilityCheck:zipList"> 
      <div class="rf-au-shdw"> 
       <div class="rf-au-shdw-t"></div> 
       <div class="rf-au-shdw-l"></div> 
       <div class="rf-au-shdw-r"></div> 
       <div class="rf-au-shdw-b"></div> 
       <div class="rf-au-lst-dcrtn "> 
        <div class="rf-au-lst-scrl"> 
         <table id="manualEligibilityCheck:zipItems" class="rf-au-tbl"> 
          <tbody></tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
     <script type="text/javascript">new RichFaces.ui.Autocomplete("manualEligibilityCheck:zip", 
        "manualEligibilityCheck:zipInput", {"buttonId":"manualEligibilityCheck:zipButton","minChars":1,"isCachedAjax":false} 
        );</script> 
    </span> 
</span> 

01 RichFaces는 입력 필드 주위에 여분의 span 태그를 추가하지 입력 필드에 있지만 상위 범위에 스타일 클래스를 적용,

<h:panelGroup id="zipWrapper"> 
    <rich:autocomplete id="zip" styleClass="form-control" 
      value="#{manualEligibilityCheck.customer.zipCode}" 
      required="#{manualEligibilityCheck.emptyPhoneNrSiteId}" 
      requiredMessage="#{messages['cct.manualEligibilityCheck.zip']} #{messages['cct.manualEligibilityCheck.validation.requiredField']}" 
      disabled="#{manualEligibilityCheck.companyInfoDisabled or manualEligibilityCheck.disableAll}" 
      autocompleteMethod="#{manualEligibilityCheck.addressSearch.autocompleteZip}" 
      minChars="1" 
      mode="ajax" 
      var="zipdata" 
      layout="table" 
      fetchValue="#{zipdata.zipcode}"> 
     <rich:placeholder 
      value="#{messages['cct.manualEligibilityCheck.zip']}" /> 
     <rich:column> 
      <h:outputText value="#{zipdata.zipcode}"/> 
     </rich:column> 
     <rich:column> 
      <h:outputText value="#{zipdata.city}"/> 
     </rich:column> 
    </rich:autocomplete> 
</h:panelGroup> 

문제는 여기에 있습니다 : 23,516,

여기 rich:autocomplete 필드의 JSF 코드입니다. 이 문제에 대한 적절한 해결책을 찾지 못했습니다. RichFaces "기능"때문에 코드에서 rich:autocomplete을 삭제하고 JQuery와 JavaScript를 사용하도록 전환해야합니다.

누군가 비슷한 문제가 발생하여 스타일을 수정하기위한 해결책이 있습니까?

<rich:autocomple inputClass="form-control"/> 

또는 입력보다는 스팬에 스타일을 적용하는 CSS 선택기를 사용하여, 예를 들면 : 대신 styleClass의

Answer 1

사용 inputClass 속성은 클래스 요소에 표시 할 것을 RichFaces에게

을

.form-control input { 
    ...styles go here... 
}