Questions about an Input with a completion help

edited September 2012 in Newbie Questions
Greetings,

1st post on Enyojs's forums : o/ comrades.

I try to create a Kind that enhance an Input : while the user is typing, it pops a list of possible completion from a given array of words. Better than a wall of text, here is a jsFiddle :

demo HintInput

1st field can pop with "a" or "i"
2nd with "F", "U", "D"
3rd with "D", "I", "C"
4th with "Z", "C", "A"

There is still several issues, like capitalization not taken into account, but I've reached a state where I've questions I would like to ask to senior enyo users.

1)Did I miss something on Enyo API ? Is there a Component doing what I try to achieve out of the box ?

2)How can I make the Repeater to be "outside" the Menu ? As it is, the Repeater is rendered inside of the menu. I would like the Repeater to be some kind of Popup that is rendered below the Input but not inside the menu. I tried with MenuDecorator but the second menu is still bounded by the main menu.

Thanks

Nicolas

Comments

  • edited September 2012
    For #1 - there's nothing in the framework that directly addresses this need. For question #2, Have you considered using a Popup kind? Something like this:
    http://jsfiddle.net/zNUKM/3/
  • Come to think of it, maybe a Menu kind would be a better fit for this. Ares uses a "Select" kind in a Popup for autocompletion, which just renders a standard html select tag. That gives you keyboard navigation, as well.
  • edited September 2012
    Thank you for these tips. With that in mind, I've done a popup menu for completion but didn't use the Select kind : it looks like a ComboBox and is not really useable with completion. It looks like that now :

    jsFiddle

    There are 2 issues remaining (apart from the horrible look)
    *Positioning the popup :
    var domElement = this.hasNode();
    this.$.popup.setStyle("position:absolute;top:"+
        domElement.getPosition().y+domElement.clientHeight*1.3)+"px;left:"+
        domElement.getPosition().x+"px");
    This is not viable. For instance getPosition() don't work on jsFiddle (but is working fine on local environment).

    *Closing the popup immediately onTap(now it blurs when you click away as any other popup).
    setTimeout(enyo.bind(this.$.popup, this.$.popup.hide), 100);

    onblur occurs on Popup before ontap on the selected element. I delay the popup hiding, waiting for ontap to propagate.
  • edited September 2012
    Ryan, that's very cool. Please do submit it to the Community Gallery. One question: Why do you create the menu dynamically in create() rather than just adding:
        components: [
            {name: "popup", kind: "onyx.Menu", floating: true}
        ],
    
    to the kind definition?
  • I'm joining mbessey in saying this is a great Kind.

    I updated your jsFiddle with few things :
    *
    Replaced
    this.$.acid.setValues(s);
    by
    source.setValues(s);
    in onInputChanged to allow multiple instance.

    *
    Added an example with an IconButton to clear the text.

    Here it is

    Thanks to both of you
  • edited September 2012
    @mbessey it doesn't need to be called in create. Really just ended up that way after a couple iterations. I had a MenuDecorator in the mix at one point as the controlParent and was creating the Menu as a child of it dynamically. Probably wasn't necessary in hindsight.
Sign In or Register to comment.