根据自动完成值动态更新 primefaces 组件答案

【问题标题】：Dynamic update primefaces component according to a autocomplete value根据自动完成值动态更新 primefaces 组件
【发布时间】：2015-04-02 03:29:26
【问题描述】：

有人可以解释如何使用自动完成组件更新视图中的某个组件（例如：dataScroller、dataList 等）？我正在尝试使用 ajax 事件“itemSelect”但在如何继续方面没有成功，任何示例、解释、灯光都会有很好的帮助。

一些代码（xhtml页面）

<h:form id="frmPesquisarModalidade">
    <p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
        var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
        <f:converter binding="#{modalidadeConverter}"/>
        <f:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" render="test"/>
        <p:column style="width:10%">
            <h:outputText value="#{modalidade.nome}"/>
        </p:column>
    </p:autoComplete>
    <p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
        <h:panelGrid columns="2" cellpadding="5" id="test">
            <h:outputText value="#{modalidade.nome}"/>
        </h:panelGrid>
    </p:dataScroller>
</h:form>

支持豆

@Named
@ViewScoped
public class MatriculaBean {

private List<Modalidade> modalidadesDisponiveis;
private List<Modalidade> modalidadesSelecionadas;

@Autowired
private ServicoModalidade servicoModalidade;

@PostConstruct
private void init(){
    modalidadesDisponiveis = servicoModalidade.listar();
}

public List<Modalidade> completeModalidade(String busca) {
    List<Modalidade> filtrados = new ArrayList<Modalidade>();
    for (Modalidade mod : modalidadesDisponiveis) {
        if (mod.getNome().contains(busca)) {filtrados.add(mod);}
    }
    return filtrados;
}

public void onItemSelect(SelectEvent event){
    //????????
}

【问题讨论】：

标签： jsf primefaces autocomplete

【解决方案1】：

你需要在onItemSelect方法中做的是根据选择的项目更新目标组件的值。

如果要更新dataScrollModalidadesSelecionadas：

public void onItemSelect(SelectEvent event){
     //Get the selected item value
     Modalidade m = new Modalidade();
     m = event.getObject();
     //Create/use a List method which can search the DB based on the selected item
     modalidadesDisponiveis = servicoModalidade.listarPorModalidade(m);
}

而在 JSF 中，你只需要更新目标组件：

<p:autoComplete ...... >
    <p:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
</p:autoComplete>

我不确定您定义的那些选项和属性是否会按预期工作，但上面的示例是基于 ItemSelect 更新组件的基础知识。另外，我更喜欢使用<p:ajax> 而不是<f:ajax>

【讨论】：

您使用 p:ajax insted of f:ajax 的提示很好！谢谢！不知道为什么 f:ajax 不起作用
不客气！您尝试使用 f:ajax 渲染 test，也许如果您继续使用 f:ajax 并渲染组件 dataScrollModalidadesSelecionadas 它可能会起作用！

【解决方案2】：

        <h:form id="frmPesquisarModalidade">
                    <p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
                    var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
                        <f:converter binding="#{modalidadeConverter}"/>
                        <p:ajax event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
                        <p:column style="width:10%">
                            <h:outputText value="#{modalidade.nome}"/>
                        </p:column>
                    </p:autoComplete>
                    <p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
                        <h:panelGrid columns="2" cellpadding="5">
                            <h:outputText value="#{modalidade.nome}"/>
                        </h:panelGrid>
                    </p:dataScroller>
                </h:form>

解决了！！！为了解决我的问题，我发现不需要在 itemSelect 事件中应用支持 bean 逻辑......只需在 xhtml 页面中创建一个 ajax 事件并使用具有相应 ID 的更新属性！感谢您的帮助

【讨论】：