通过在外部单击隐藏面板时强制选择突出显示的 p:autoComplete 项

Question

我的自动完成有问题（错误？）。

MyFaces 2.2.9 与 PrimeFaces 5.1

下面这只是一个重现我的错误的例子。我的模态对话框中有一个自动完成框。

案例 1：我在自动完成列表中输入 select "hello" 并提交。转换器获取我的个人 ID 并搜索合适的人，一切正常。
案例 2（错误 1）：我键入 "h" 并在我的模态区域中单击 h 保持并关闭列表。（当我提交我的表格时 h 只消失了，没有转换器调用）但我认为 h 应该消失，因为力 select离子?
案例 3（错误 2）：另一个错误更难。当我输入 "hello" （在列表中）在我的框中并单击我的模式对话框区域，你好留下来！当我提交表单时，我在转换器中得到 "hello" 然后返回 "null" 因为他只搜索 ID。

案例 3 的更多内容：我试着用更多的细节来解释它（见评论）：我在我的自动完成框中键入一些内容，其中包含一个字符串，它在我的框中。

比我点击我的模式区域。（不！直接在可选的你好上）。比你好似乎也接受。

现在我点击我的测试按钮，在我的转换器中 public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2) { 是 arg2 而不是来自 hello 的 ID，它是字符串 "hello"。只有字符串。

我的预期行为应该是出现我的 ID。只有当我使用正常的 selection 时才会出现 id。

希望你能帮助我。感谢您的宝贵时间 :)

问题：这是bug还是我的误会？

XHTML:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>test</title>
</h:head>

<h:body>
    <h:form onkeypress="return event.keyCode != 13">
         <p:commandButton value="show Dialog" 
                          oncomplete="PF('dgl').show()"
                          update=":dglform"/>
    </h:form>

    <p:dialog widgetVar="dgl" modal="true" resizable="false">
         <h:form id="dglform" onkeypress="return event.keyCode != 13">
             <p:autoComplete id="auto"
                             forceSelection="true"
                             converter="personConverter"
                             value="#{myController.selectedPerson}"
                             var="per"
                             itemLabel="#{per.name}"
                             itemValue="#{per}"
                             completeMethod="#{myController.search}">
             </p:autoComplete>

             <p:commandButton value="test" update="@form" />
          </h:form>
      </p:dialog>
    </h:body>
</html>

转换器：

@FacesConverter("personConverter")
public class PersonConverter implements Converter{

    @Override
    public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2) {
        System.out.println(arg2);

        //Search my entity with id...
        return null;
    }

    @Override
    public String getAsString(FacesContext arg0, UIComponent arg1, Object arg2) {
        if(arg2 instanceof Person){
            Person p = (Person) arg2;
            return String.valueOf(p.getId());
        }
        return null;
    }
}

控制器：

@ManagedBean
@ViewScoped
public final class MyController implements Serializable {

    private static final long serialVersionUID = 1L;
    private Person selectedPerson;
    private List<Person> persons;

    @PostConstruct
    public void init() {
        persons = new ArrayList<Person>();
        persons.add(new Person(1, "hello"));
        persons.add(new Person(2, "hello2"));
    }

    public void selectListener(SelectEvent event){
        System.out.println("SELECT!");
    }

    public Person getSelectedPerson() {
        return selectedPerson;
    }

    public void setSelectedPerson(Person selectedPerson) {
        this.selectedPerson = selectedPerson;
    }

    public List<Person> search(String qry) {
        return persons;
    }
}

Answer 1

这不一定是 PrimeFaces 中的错误，但可能是在使用 forceSelection="true" 的情况下的疏忽。您可能希望此处的行为与在输入中按 Tab 键时相同。

你最好将此作为 issue 报告给 PF 伙计们。同时，假设 PrimeFaces 5.1：

，您可以自己解决这个问题

将 raw source code of original autocomplete.js 的副本作为 /resources/primefaces/autocomplete/autocomplete.js 放入您的网络应用程序。
前往line 170。这是处理自动完成面板的隐藏事件的地方。
在第 181 行，在第二个和第三个 if 块之间，插入以下代码：
```
if ($this.cfg.forceSelection) {
    $this.items.filter('.ui-state-highlight').click();
}
```
这将在使用 forceSelection="true" 时强制自动选择突出显示的项目。
在您的 <h:body> 顶部加载自定义 autocomplete.js（不是 <h:head>！），如下所示：
```
<h:outputScript library="primefaces" name="autocomplete/autocomplete.js" target="head" />
```

这确实有些麻烦，但是由于这些函数是私有的，所以不能轻易地从外部覆盖它们。附加另一个侦听器也不起作用，因为它明确地对任何以前的侦听器执行 $.off()。

通过在外部单击隐藏面板时强制选择突出显示的 p:autoComplete 项

Force selection of highlighted p:autoComplete item when panel is hidden by clicking outside

javascript

jsf

autocomplete

primefaces