首页 > 编程语言> > javascript-通过单击外部隐藏面板时强制选择突出显示的p：autoComplete项

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

2019-11-20 14:34:26 作者：互联网

我的自动完成功能有问题(错误？).

MyFaces 2.2.9和PrimeFaces 5.1

下面仅是重现我的错误的示例.我的模态对话框中有一个自动完成框.

>案例1：我键入了一些内容,请从自动完成列表中选择“ hello”
并提交. Converter会获取我的人名并搜索合适的人,
一切正常.
>案例2(错误1)：我输入“ h”并在我的模式区域中单击h
停留并关闭列表. (当我提交表格h时,它只会消失,
转换器调用),但我认为h应该会消失,因为强制
选择？
>情况3(错误2)：另一个错误更加严重.当我输入“你好”
(在列表中)(在列表中),然后在我的模式对话框区域中单击,
你好！当我提交表格时,我的转换器中显示“你好”
并返回“ null”,因为他仅搜索ID.

情况3的更多内容：我尝试更详细地解释它(请参阅评论)：
我在自动完成框内输入一个字符串,即字符串.

比我在模态区域中单击(不！直接在可选择的问候上).比你好似乎也被接受.

现在,我单击测试按钮,然后在我的转换器中,公共对象getAsObject(FacesContext arg0,UIComponent arg1,String arg2){是arg2而不是hello的ID,它是字符串“ hello”.只有字符串.

我的预期行为应该是有我的身份证.仅当我使用常规选择时,ID才会出现.

希望您能够帮助我.
谢谢你的时间：)

问题：这是我的错误还是误解？

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;
    }
}

解决方法:

这不一定是PrimeFaces中的错误,但是在使用forceSelection =“ true”的情况下可能会疏忽.您可能希望在这里与在输入中按Tab键时的行为相同.

您最好向PF球员报告为issue.同时,假设PrimeFaces 5.1,您可以按照以下方法自行解决：

>将原始autocomplete.js的raw source code副本作为/resources/primefaces/autocomplete/autocomplete.js放入您的Web应用程序.
>转到line 170.这是正在处理自动完成面板的hide事件的地方.
>在第181行的第二和第三个if块之间,插入以下代码：

if ($this.cfg.forceSelection) {
    $this.items.filter('.ui-state-highlight').click();
}

当使用forceSelection =“ true”时,这将强制选中突出显示的项目.
>将自定义的autocomplete.js加载到< h：body>顶部. (不是< h：head&gt ;!)：

<h:outputScript library="primefaces" name="autocomplete/autocomplete.js" target="head" />

这确实有点麻烦,但是由于这些功能是私有的,因此无法轻松地从外部覆盖它们.此外,附加另一个侦听器将不起作用,因为它在任何先前的侦听器上都显式执行$.off().

标签：jsf,autocomplete,primefaces,javascript
来源： https://codeday.me/bug/20191120/2044599.html