jQuery UIオートコンプリートに基づいていると思われるPrimeFacesオートコンプリートは、長いテキストで奇妙な動作をしており、結果が表示されないボックス自体が非表示領域に配置されています。これは、ボックスの幅が使用可能な幅の解像度より大きい場合に発生します。コンテナの幅は、最初の検索で見つかった最大の要素の幅で初期化され、結果の要素の長さが短くても、後続の結果は同じ幅で表示されるようです。コンテナーの幅を固定し、水平スクロールバーを表示する代わりにテキストを折り返すようにしたいと考えています。これがバグかどうかはわかりませんが、利用可能な幅がない場合、画面の左側のサイズに隠されているため、結果が表示されなくなるため、私には思えます。
ブラウザーを更新してコンテナーの幅をリセットします (F5):
ブラウザーを更新してコンテナーの幅をリセットします (F5)。これらの画像では、コンテナーの一部が表示されておらず、左側に隠されていることがわかります。
コード：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:oms="http://aom.org/oms"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
<h:form id="quotationForm" prependId="false">
<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" completeMethod="#{autoCompleteBean.complete}"/>
</h:form>
</h:body>
</html>
AutoCompleteBean.java:
package org.aom.oms.controller;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.enterprise.inject.Model;
@Model
public class AutoCompleteBean {
private String txt1;
private List<String> texts =
Arrays.asList("a0", "b0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789","c012",
"c0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456");
public List<String> complete(String query) {
List<String> results = new ArrayList<String>();
for (String text : texts) {
if (text.contains(query)) {
results.add(text);
}
}
return results;
}
public String getTxt1() {
return txt1;
}
public void setTxt1(String txt1) {
this.txt1 = txt1;
}
}
プライムフェイス 3.4.2