Css rich:autocomplete会打断页面的样式

我一直在为使用RichFaces 4.3.0.Final的项目实现地址自动完成。我使用了

rich:autocomplete

标记。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>

以下是

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

标记，并将样式类应用于上span而不是输入字段。我找不到解决这个问题的合适方法，因为这个RichFaces的“特性”，我不得不从代码中删除

rich:autocomplete

，转而使用JavaScript和JQuery

---

是否有人遇到了类似的问题并找到了修复样式的有效解决方案？

使用

inputClass

属性而不是

styleClass

告诉RichFaces您希望该类出现在元素上：

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

---

安德烈，谢谢你指出这片土地。我错过了。在我当前的项目中，我使用jqueryui的

autocomplete

，但我将在另一个项目中测试这一点，我使用的是

rich:autocomplete

。

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

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