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

2019-11-20 14:34:26 阅读：263 来源： 互联网

标签：jsf autocomplete primefaces javascript

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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