Question

PrimeFaces自动完成我认为是基于jQuery ui自动完成功能表现很奇怪，长文本结果框将结果置于不可见区域。当盒子宽度大于可用宽度分辨率时会发生这种情况。似乎容器的宽度用第一次搜索中找到的最大元素的宽度初始化，然后后续结果以相同的宽度显示，即使结果的元素在长度中可能更小。我希望容器具有固定的宽度，并且文本被包裹而不是显示水平滚动条。我不确定这是不是一个错误，在我看来，因为当没有宽度可用时你不能再看到结果，因为它隐藏在屏幕的左侧大小。

enter image description here

刷新浏览器以重置容器的宽度（F5）：

enter image description here

刷新浏览器以重置容器的宽度（F5），正如您将在这些图像中看到的那样，容器的一部分不可见并隐藏在左侧。

enter image description here

代码：

<!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

如何使PrimeFaces自动完成具有固定宽度并包含文本？

0 个答案: