primefaces 自动完成建议面板远离输入字段打开

Question

我在使用 Materialize CSS 样式的 .xhtml 页面中使用 primefaces 自动完成功能。我的 .xhtml 页面使用 JSF 2.2。有时当我开始打字时，建议面板会出现在离输入字段很远的地方，有时则不会。会发生什么？

Panel appearing away from the input field

Panel appearing correctly, near the input field

我使用 JSF 组合创建了我的自定义自动完成组件，这是代码

 <script type="text/javascript">
/**
 * Função usada para disparar a seleção de um elemento, após o clique na lista de sugestão
 */
function selectSuggestion(){
 id = arguments[0];
 if(document.getElementById('formSearch:'+id+':'+id+'_input').value!=null &amp;&amp; document.getElementById('formSearch:'+id+':'+id+'_input').value!=''){
  top.setSelecaoPesquisaJsMB([{name:'openDialog',value:arguments[1]}]);
 } 
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:ui="http://xmlns.jcp.org/jsf/facelets" 
 xmlns:h="http://xmlns.jcp.org/jsf/html"
 xmlns:f="http://xmlns.jcp.org/jsf/core" 
 xmlns:p="http://primefaces.org/ui" 
 xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
 <composite:attribute name="id" default="buscaInput" shortDescription="ID do autoComplete. Usado para referencia em outras partes do código" />
 <composite:attribute name="value" shortDescription="Elemento selecionado" />
 <composite:attribute name="style" shortDescription="Estilo complementar" />
 <composite:attribute name="styleClass" />
 <composite:attribute name="size" default="35" />
 <composite:attribute name="placeholder" />
 <composite:attribute name="completeMethod" />
 <composite:attribute name="scrollHeight" default="500" />
 <composite:attribute name="openDialog" default="#{true}"/>
 <composite:attribute name="onkeypress"/>
 <composite:attribute name="rendered" default="#{true}"></composite:attribute>
</composite:interface>

<composite:implementation>

 <p:autoComplete id="#{cc.attrs.id}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" placeholder="#{cc.attrs.placeholder}" size="#{cc.attrs.size}"
  effect="fade" forceSelection="true" minQueryLength="3" scrollHeight="#{cc.attrs.scrollHeight}" onkeypress="#{cc.attrs.onkeypress}"
  panelStyle="width: 247px !important; overflow: auto; background-color: white !important;" maxResults="50"
  emptyMessage="#{message['message.search.naoEncontrado']}" value="#{cc.attrs.value}" completeMethod="#{searchMB.autoCompletar}" var="item"
  itemLabel="#{item.nome}" itemValue="#{item}" converter="elementoLocalizavelConverter">
  <p:ajax event="itemSelect" oncomplete="selectSuggestion('#{cc.attrs.id}','#{cc.attrs.openDialog}')" immediate="true" listener="#{mapaMB.handleSelect}" />
  <p:column style="width:10%">
   <img src="${facesContext.externalContext.requestContextPath}/images/#{searchMB.stripDiacriticsTrimLowercase(item.entidade)}.png" />
  </p:column>
  <p:column>
   <h:outputText value="#{item.nome}" />
  </p:column>
 </p:autoComplete>

</composite:implementation>
</html>

这是调用我的自动完成组件的代码。

<div class="col s6">
        <h:outputLabel value="#{message['label.rota.pontaB']}* for="buscaInput2" />
        <sicaf:autoCompletion id="buscaInput2" openDialog="false" size="25" onkeypress="return disableEnterKey(event)" value="#{melhorRotaMB.pontaB}" />
</div>

Answer 1

哦，我找到解决办法了！我不知道它是否是最好的，但它就在这里。

我已经把 position: fixed 放在 primefaces 自动完成上 panelStyle 属性，问题已解决。

我用 Chrome 的 F12 检查并发现面板是 position: relative。我认为这个配置混淆了自动完成组件相对于谁，导致了错误。

好吧，我花了几个小时寻找它，在将它发布到此处 10 分钟后，我找到了解决方案。这很奇怪。不管怎样，谢谢！

primefaces 自动完成建议面板远离输入字段打开

primefaces autocomplete suggestion panel opening away from input field

autocomplete

primefaces

materialize

jsf-2