突出的p力选择:自动完成项目时面板通过点​​击隐藏外 [英] Force selection of highlighted p:autoComplete item when panel is hidden by clicking outside

查看:198
本文介绍了突出的p力选择:自动完成项目时面板通过点​​击隐藏外的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个问题(错误?)我的自动完成。

MyFaces的2.2.9与PrimeFaces 5.1

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


  1. 案例1:我从自动完成列表中键入一些选择你好
    并提交。转换得到我的人的ID和搜索合适的人,
    一切工作正常。

  2. 案例2(错误1):我H型,然后单击我的模态区的H
    住宿和清单关闭。 (当我提交表单h只需消失,无
    转换器调用),但我认为应该^ h消失,因为力
    选择?

  3. 案例3(错误2):其他错误更难。当我键入​​Hello
    (这是在列表中)在我的盒子,然后单击我的模态对话框区域,
    你好撑!当我提交表单,我得到你好在我的转换器
    并取回空,因为他只搜索的ID。

更多的情况下3 :我尝试用更多的细节(见注释)来解释吧:
我在自动完成框中键入的东西,一个字符串,这是在我的箱子。

比我点击我的情态区域。 (不!直接上可选择的你好)。比你好似乎接受了。

现在我点击我的测试按钮,并在我的转炉公开对象的getAsObject(FacesContext中为arg0,UIComponent ARG1,弦乐ARG2){是ARG2不是ID从你好,是字符串hello。只有字符串。

我的预期的行为应该是有来我的ID。该ID来,只有当我用正常选择。

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

问:这是一个错误,或者是一种误解从我

XHTML:

 < HTML的xmlns =htt​​p://www.w3.org/1999/xhtml
    的xmlns:H =htt​​p://xmlns.jcp.org/jsf/html
    的xmlns:F =htt​​p://xmlns.jcp.org/jsf/core
    的xmlns:P =htt​​p://primefaces.org/ui>< H:头>
    <标题>测试与LT; /标题>
< /小时:头>< H:身体GT;
    < H:表格安其preSS =返回event.key code = 13!>
         <电话号码:值的commandButton =显示对话框
                          的onComplete =PF('DGL')。节目()
                          更新=:dglform/>
    < /小时:形式>    <电话号码:对话框widgetVar =DGL模式=真正的可调整大小=false的>
         < H:表ID =dglform安其preSS =返回event.key code = 13!>
             <电话号码:自动完成ID =自动
                             forceSelection =真
                             转换器=personConverter
                             值=#{} myController.selectedPerson
                             VAR =每个
                             itemLabel =#{} per.name
                             itemValue =#{}每
                             completeMethod =#{} myController.search>
             < / P:自动完成>             <电话号码:值的commandButton =测试更新=@表/>
          < /小时:形式>
      < / P:对话>
    < /小时:身体GT;
< / HTML>

转换器:

  @FacesConverter(personConverter)
公共类PersonConverter实现转换器{    @覆盖
    公共对象的getAsObject(FacesContext中为arg0,ARG1 UIComponent,字符串ARG2){
        的System.out.println(ARG2);        //搜索我的实体ID ...
        返回null;
    }    @覆盖
    公共字符串符getAsString(FacesContext中为arg0,ARG1 UIComponent,对象ARG2){
        如果(ARG2的instanceof人){
            人P =(人)ARG2;
            返回将String.valueOf(p.getId());
        }
        返回null;
    }
}

控制器:

  @ManagedBean
@ViewScoped
公共final类myController的实现Serializable {    私有静态最后的serialVersionUID长1L =;
    私募人士selectedPerson;
    私人列表<&人GT;者;    @PostConstruct
    公共无效的init(){
        人=新的ArrayList<&人GT;();
        persons.add(新的Person(1,你好));
        persons.add(新的Person(2,hello2));
    }    公共无效selectListener(SelectEvent事件){
        的System.out.println(选择!);
    }    公众人物getSelectedPerson(){
        返回selectedPerson;
    }    公共无效setSelectedPerson(人selectedPerson){
        this.selectedPerson = selectedPerson;
    }    公开名单<&人GT;搜索(字符串QRY){
        返回的人员;
    }
}


解决方案

这不一定是PrimeFaces的一个bug,但可能的情况下,监督 forceSelection =真正的用来。你会在这里有所期望相同的行为,当您preSS的输入中的<大骨节病>标签键。

您会以PF最好的球员本报告作为一个问题。在此期间,这里是你如何可以自己解决办法是,假设PrimeFaces 5.1:


  1. 放<一个副本href=\"https://primefaces.google$c$c.com/svn/primefaces/tags/5_1/src/main/resources/META-INF/resources/primefaces/autocomplete/autocomplete.js\"相对=nofollow>的原生来源$ C ​​$ C <一个href=\"https://$c$c.google.com/p/primefaces/source/browse/primefaces/tags/5_1/src/main/resources/META-INF/resources/primefaces/autocomplete/autocomplete.js\"相对=nofollow> autocomplete.js /resources/primefaces/autocomplete/autocomplete.js 在你的web应用。


  2. 前往<一个href=\"https://$c$c.google.com/p/primefaces/source/browse/primefaces/tags/5_1/src/main/resources/META-INF/resources/primefaces/autocomplete/autocomplete.js#170\"相对=nofollow>行170 。这是被处理的自动完成面板的隐藏事件。


  3. 目前线181,第二个和第三个如果块之间,插入低于code:

     如果($ this.cfg.forceSelection){
        。$ this.items.filter('UI状态高亮)点击();
    }

    这将迫使突出显示的项目是自动选中时 forceSelection =真正的被使用。


  4. 加载自定义 autocomplete.js 在你的&LT顶部; H:身体GT; (不&LT; H:头&GT; ),如下:

     &LT; H:outputScript库=primefacesNAME =自动完成/ autocomplete.js目标=头/&GT;


这是确实有点麻烦,但因为这些功能是私有的,他们不能被轻易地从外面覆盖。还附加其它监听是行不通的,因为它是明确地做一个 $。关()上的任何previous听众。

I have a problem (bug?) with my auto-complete.

MyFaces 2.2.9 with PrimeFaces 5.1

This below is only an example to reproduce my error. I have a auto-complete - box in my modal dialog.

  1. Case 1 : I type something select "hello" from list in autocomplete and submit. Converter gets my person id and search the right person, all works fine.
  2. Case 2 (Error 1) : I type "h" and click in my modal area the h stays and list close. (When I submit my form h only disappears, no converter call) But I think h should disappear because force selection?
  3. Case 3 (Error 2) : The other error is harder. When I type "hello" (which is in the list) in my box and click in my modal dialog area, hello stays! When I submit the form I get "hello" in my converter and get back "null" because he only searches for the ids.

More for case 3: I try to explain it with more details (see comments): I type something in my autocomplete box, with a string, that is in my box.

than i click in my modal area. (NOT! directly on the choosable hello). Than the hello seems to be accept, too.

Now i click on my test button and in my converter public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2) { is arg2 not the ID from hello, it is the string "hello". Only the string.

My expected behavior should be that there comes my id. The id comes only when i use the normal selection.

Hope you can help me. Thanks for your time :)

Question: Is this a bug or it is a misunderstanding from me?

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>

Converter:

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

Controller:

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

解决方案

This is not necessarily a bug in PrimeFaces, but likely an oversight in case forceSelection="true" is used. You'd somewhat expect the same behavior here as when you press the Tab key in the input.

You'd best report this as an issue to PF guys. In the meanwhile, here's how you can workaround it yourself, assuming PrimeFaces 5.1:

  1. Put a copy of raw source code of original autocomplete.js as /resources/primefaces/autocomplete/autocomplete.js in your webapp.

  2. Head to line 170. This is where the hide event of the autocomplete panel is being handled.

  3. At line 181, between the second and the third if block, insert the below code:

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

    This will force the highlighted item to be auto-selected when forceSelection="true" is used.

  4. Load the customized autocomplete.js in top of your <h:body> (not <h:head>!) as below:

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

This is indeed somewhat cumbersome, but as those functions are private, they can't be easily overridden from outside. Also attaching another listener won't work as it's explicitly doing a $.off() on any previous listeners.

这篇关于突出的p力选择:自动完成项目时面板通过点​​击隐藏外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆