rich：autocomplete突破页面的风格

Question

我一直在为我们的项目使用RichFaces 4.3.0.Final实现地址自动填充。我已使用rich:autocomplete标记。自动完成功能正常，但是我们网页的风格却被打破了。 这里是我们的田地看起来像没有rich:autocomplete：

这里是它的外观与标签的地方：

这是一个被RichFaces的生成h:inputText 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由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> 

下面是rich:autocomplete领域的JSF代码：

<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> 

的问题是在这里，是RichFaces的周围增加了输入字段中的额外span标签和应用样式类不输入字段，但到上跨度。我无法找到任何适合此问题的解决方案，并且由于此RichFaces“功能”，我必须从我们的代码中删除rich:autocomplete，并切换为在JQuery中使用JavaScript。

有人遇到类似的问题，并找到工作解决方案来修复样式？

Answer 1

使用inputClass属性代替styleClass告诉RichFaces的，你希望类出现的元素：

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

，或者使用CSS选择器来输入，而不是在跨度应用样式，例如：

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