2

我认为基于 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;  
    }  

}

PrimeFaces 3.4.2

4

0 回答 0