PrimeFaces中如何实现autocomplete组件选中条目后跳转打开新页面

前置准备 #

确认你的Componente实体类已添加存储页面对应访问路径的字段（示例字段名为url，类型为String），并已提前维护好所有条目对应的页面路径值，比如内部页面可存为/pages/order/detail.xhtml，外部链接可存为https://xxx.com。

步骤1：修改前端xhtml配置 #

调整你现有代码中的<p:ajax>标签，新增oncomplete属性用于接收后台返回的路径后执行跳转逻辑，修改后的完整组件示例如下：

<p:autoComplete id="autoMenu"
                value="#{menuController.componenteP}"
                completeMethod="#{menuController.getAutoComplete}"
                converter="genericConverter"
                var="componente"
                itemLabel="#{componente.dsComponente}"
                itemValue="#{componente}"
                queryDelay="50"
                forceSelection="true"                                                                
                placeholder="Menu"
                required="false"                                               
                >
    <!-- 新增oncomplete属性，后台逻辑执行完后触发前端跳转 -->
    <p:ajax event="itemSelect" listener="#{menuController.onItemSelect}" update="msgs" oncomplete="if (args &amp;&amp; args.targetUrl) window.location.href = args.targetUrl"/>
    <f:attribute name="classe" value="Componente" />
    <p:column>
        <b><h:outputText value="#{componente.codigo}"/></b>
    </p:column>
    <p:column>
        <p:outputLabel rendered="#{componente != null}" value="#{componente.dsComponente}" />
    </p:column>
</p:autoComplete>

这里把forceSelection改为true，可以强制用户只能选择匹配到的条目，避免输入无效内容触发异常。如果需要允许用户自定义输入可以保留原false配置。

步骤2：编写后台Controller逻辑 #

在MenuController类中实现onItemSelect方法，拿到选中条目对应的路径后通过PrimeFaces的RequestContext传递给前端：

import org.primefaces.PrimeFaces;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;

// 你的MenuController类
public class MenuController {
    // 原有属性和方法保持不变
    private Componente componenteP;

    public void onItemSelect(AjaxBehaviorEvent event) {
        if (componenteP == null) {
            return;
        }
        String rawUrl = componenteP.getUrl();
        String targetUrl = rawUrl;
        // 如果是应用内部页面，拼接上下文路径，避免部署到不同上下文根时路径错误
        if (rawUrl.startsWith("/")) {
            String contextPath = FacesContext.getCurrentInstance().getExternalContext().getRequestContextPath();
            targetUrl = contextPath + rawUrl;
        }
        // 将跳转路径传递给前端
        PrimeFaces.current().ajax().addCallbackParam("targetUrl", targetUrl);
    }

    // 原有getter、setter保持不变
    public Componente getComponenteP() {
        return componenteP;
    }

    public void setComponenteP(Componente componenteP) {
        this.componenteP = componenteP;
    }
}

可选配置 #

如果需要选中条目后在新标签页打开页面，只需要把前端oncomplete里的跳转逻辑替换为：

if (args && args.targetUrl) window.open(args.targetUrl, '_blank');

内容的提问来源于stack exchange，提问作者Rodrigo Vidal