Question

我一直在为使用RichFaces 4.3.0.Final的项目实现地址自动完成。我使用了rich:autocomplete标记。自动填充工作正常，但我们的分页风格。以下是我们的字段在没有rich:autocomplete的情况下的样子： enter image description here

以下是标签到底的样子： enter image description here

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

这是RichFaces为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>
    <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并切换到使用JavaScript与JQuery。

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

Answer 1

使用inputClass属性代替styleClass告诉RichFaces您希望该类出现在该元素上：

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

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

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

rich：autocomplete打破页面样式

1 个答案: