java - Primefaces 开关 p :autoComplete values

Question

我的面板上有两个用于输入的 p:autoComplete 字段，如下所示。输入 1“contactName1”在左侧，input2“contactname2”在右侧。选择 ID 为“flipInput”的命令按钮时，所选输入值应该切换。(就像在谷歌地图中切换源和目标值一样)。我是 primefaces 的新手，所以不确定是否要实现它。请帮助我修复它。

    <p:column colspan="2" rendered="#{empty contactController.selectedContact}">
                                <p:autoComplete id="contactName1"
                                    value="#{newContactRs.contact}"
                                    completeMethod="#{contactRelationshipController.completeContacts}"
                                    var="contact" itemLabel="#{contact.fullName}"
                                    itemValue="#{contact}" converter="#{contactConverter}"
                                    forceSelection="true" size="35" scrollHeight="200"
                                    panelStyle="width:10px;">
                                    <p:ajax event="itemSelect" update="contactName1" />
                                </p:autoComplete>
                                <p:commandButton icon="ui-icon-arrow-2-e-w" id="flipButton"/>
                                <smith:contactSelector value="#{newContactRs.contact}" update=":addContactRelationshipForm:addNewContactRelationshipPanel" triggerId="existingContactSelector1"
                                            resultList="#{contactRelationshipController.selectAllContact1}"/>

                            </p:column>
<p:column colspan="2">
                            <p:autoComplete id="contactName2"
                                value="#{newContactRs.relatedContact}"
                                completeMethod="#{contactRelationshipController.completeContacts}"
                                var="contact" itemLabel="#{contact.fullName}"
                                itemValue="#{contact}" converter="#{contactConverter}"
                                forceSelection="true" size="35" scrollHeight="200"
                                panelStyle="width:10px;">
                                <p:ajax event="itemSelect" update="contactName2" />
                            </p:autoComplete>
                            <smith:contactSelector value="#{newContactRs.relatedContact}" update=":addContactRelationshipForm:addNewContactRelationshipPanel" triggerId="existingContactSelector2"
                                        resultList="#{contactRelationshipController.selectAllContact2}"/>
                        </p:column>

Answer 1

添加了以下 javascript

function swapInput()
{
    var input_a =document.getElementById('addContactRelationshipForm:contactName1_input').value; 
    var input_b =document.getElementById('addContactRelationshipForm:contactName2_input').value;

    document.getElementById('addContactRelationshipForm:contactName1_input').value = input_b;
    document.getElementById('addContactRelationshipForm:contactName2_input').value = input_a;
}

并将命令按钮更改为

<p:commandButton icon="ui-icon-arrow-2-e-w" id="flipButton" 
styleClass="ui-panel-titlebar-icon" oncomplete="swapInput()" update="addNewContactRelationshipPanel" immediate="true"/>