0
私は、マテリアライズCSSスタイルを使用する.xhtmlページでprimefacesオートコンプリートを使用しています。私の.xhtmlページはJSF 2.2を使用しています。入力を開始するときに、提案パネルが入力フィールドから離れて表示されることがあり、時には表示されないことがあります。何が起こっているのでしょうか？primefaces提案パネルが入力フィールドから離れて開きます
Panel appearing away from the input field
Panel appearing correctly, near the input field
私は、JSFの複合材を使用して、私のカスタムオートコンプリートコンポーネントを作成し、ここにコード
\t <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(){
\t id = arguments[0];
\t if(document.getElementById('formSearch:'+id+':'+id+'_input').value!=null && document.getElementById('formSearch:'+id+':'+id+'_input').value!=''){
\t \t top.setSelecaoPesquisaJsMB([{name:'openDialog',value:arguments[1]}]);
\t }
}
</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"
\t xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
\t xmlns:h="http://xmlns.jcp.org/jsf/html"
\t xmlns:f="http://xmlns.jcp.org/jsf/core"
\t xmlns:p="http://primefaces.org/ui"
\t xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
\t <composite:attribute name="id" default="buscaInput" shortDescription="ID do autoComplete. Usado para referencia em outras partes do código" />
\t <composite:attribute name="value" shortDescription="Elemento selecionado" />
\t <composite:attribute name="style" shortDescription="Estilo complementar" />
\t <composite:attribute name="styleClass" />
\t <composite:attribute name="size" default="35" />
\t <composite:attribute name="placeholder" />
\t <composite:attribute name="completeMethod" />
\t <composite:attribute name="scrollHeight" default="500" />
\t <composite:attribute name="openDialog" default="#{true}"/>
\t <composite:attribute name="onkeypress"/>
\t <composite:attribute name="rendered" default="#{true}"></composite:attribute>
</composite:interface>
<composite:implementation>
\t <p:autoComplete id="#{cc.attrs.id}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" placeholder="#{cc.attrs.placeholder}" size="#{cc.attrs.size}"
\t \t effect="fade" forceSelection="true" minQueryLength="3" scrollHeight="#{cc.attrs.scrollHeight}" onkeypress="#{cc.attrs.onkeypress}"
\t \t panelStyle="width: 247px !important; overflow: auto; background-color: white !important;" maxResults="50"
\t \t emptyMessage="#{message['message.search.naoEncontrado']}" value="#{cc.attrs.value}" completeMethod="#{searchMB.autoCompletar}" var="item"
\t \t itemLabel="#{item.nome}" itemValue="#{item}" converter="elementoLocalizavelConverter">
\t \t <p:ajax event="itemSelect" oncomplete="selectSuggestion('#{cc.attrs.id}','#{cc.attrs.openDialog}')" immediate="true" listener="#{mapaMB.handleSelect}" />
\t \t <p:column style="width:10%">
\t \t \t <img src="${facesContext.externalContext.requestContextPath}/images/#{searchMB.stripDiacriticsTrimLowercase(item.entidade)}.png" />
\t \t </p:column>
\t \t <p:column>
\t \t \t <h:outputText value="#{item.nome}" />
\t \t </p:column>
\t </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>
[p：selectOneMenuドロップダウンリストがスクロールして位置に残りません]（https://stackoverflow.com/questions/26228872/pselectonemenu-dropdown-part-scrolls-and-does-not-stay-in） -ポジション） – Kukeltje