ListShuttle - "jump" to an entry with the first letter matching with the key pressed

[giuliano.rap]

Hi,

I am new with RichFaces, sorry.

What I need to do is: I have a listShuttle and when the user presses some key, the listShuttle must to select a value where its first letter matches with the key. For example, if the user presses the key 'a' so the listShuttle must selects the first value starting with 'a'.
Any ideas?

What I thought is to get the key pressed and send it to the bean, and there set the attributes 'targetSelection' and 'sourceSelection' of the listShuttle. How can I get the key pressed and pass it to the bean? Actually using the support of ajax for onkeydown event I can get the key but dont know how to pass it to the bean.

I dont know if I am asking at the right place, if not I am sorry.

Thanks in advance.

[giuliano.rap]

Sorry by the highlights.

[sivaprasad9394]

Please check with Jquey to implement this concept in richfaces.

Check this link for your reference.

Jquery picklist plugin

[giuliano.rap]

Wich link? :]

Thanks!

[sivaprasad9394]

http://gsgd.co.uk/sandbox/jquery/picklists/

[giuliano.rap]

Thank you very much, I will take a look on it and come back here.

[mcmurdosound]

Which Version of Richfaces are you using?

You could send the event data to the backing bean. For example with an a4j:support and / or a4j:jsFunction. By submitting the keycode, you could change the selecting of the listShuttle accordingly.

- You'll need to get the listShuttle UIComponent from the FacesContext.

- The get the current Selection (if such a thing exists and works)

- move the selection to the item matching the keycode / char.

- reRender the Listshuttle

- reset focus to the listShuttle to be able to press the next key again

Just some ideas.

[mcmurdosound]

This one seems to work:

@RequestParameter // org.jboss.seam.annotations.web

  private String eventKeycode;

public void demoListener(javax.faces.event.ActionEvent event) {

    log.debug("----- event #0", event);

    log.debug("---- keycode ---- #0", eventKeycode);

    FacesContext ctx = FacesContext.getCurrentInstance();

    UIComponent component =

        ctx.getViewRoot().findComponent("idForm:idListShuttle"); // find the listshuttle

    log.debug("---- component ---- #0", component);

    if (component instanceof HtmlListShuttle) {

      HtmlListShuttle ls = (HtmlListShuttle) component;

      Set sourceSelection = ls.getSourceSelection();

      Object sourceValue = ls.getSourceValue();

      sourceSelection.clear();

      sourceSelection.add(((List) sourceValue).get(0)); // just set to the first elem in list

      log.debug("sourceselection #0", sourceSelection);

      log.debug("sourceValue #0", sourceValue);

      AjaxContext ajax = AjaxContext.getCurrentInstance();

      ajax.addComponentToAjaxRender(ls); // rerender Listshuttle

    }

  }

<rich:listShuttle id="idListShuttle" sourceValue="#{myItems}"

...

<a4j:support event="onkeypress" onsubmit="listShuttleKeypressed(event.which);" oncomplete="console.log(event.which);"/>

                      </rich:listShuttle>  

                      <a4j:jsFunction name="listShuttleKeypressed"  actionListener="#{myManager.demoListener}">

                      <a4j:actionparam name="eventKeycode"/>

                      </a4j:jsFunction>

I'm not sure how this would work without jboss seam and / or with richfaces 4.x

[giuliano.rap]

Thanks Christian, it was really helpful!

I just changed a thing: I am using the method setSourceSelection from HtmlListShuttle instead of getSourceSelection.

The only thing now is to set the focus on the select item, so the user can press another key and change the selection again. Any idea?

Thank you guys!

[giuliano.rap]

I found a way to set the focus on the selected item (maybe it's not so good programming): with the attribute data from a4j:jsFunction I get the number of the selected item and then I get the element by id and call the click method. Like this:

<a:jsFunction name="keyHandlerJS"

                     action="#{userdefWizard.testHandler()}" data="#{userdefWizard.elementCounter}"

                     oncomplete="var id = 'wizardGenericForm:includedStepContent:ls_concernList:'.concat(data);

                                         document.getElementById(id).click();"

                     eventsQueue="foo"

                     ignoreDupResponses="true" />

What do you think guys?
It's the only way I found...

Besides that, I need to know if the user is selecting from the source or the target. Any ideas?

Thanks!!

[giuliano.rap]

I need to think in something else because it doesn't work well. When we move the item from/to source and target, the item carries its id.

[giuliano.rap]

I found a solution to re-update the rowIndex at https://community.jboss.org/message/597767

So now I just need to know if the user is selecting from the source or the target. Any idea?

Thanks!

[giuliano.rap]

Does anyone know how the activeItem works?

Apparently, it stores the item "clicked" by the user, but the item from the target list has more priority than the source list. For example, once the user clicked on some item from target list, the activeItem stores always this value, doesn't matter if the user clicks on the source list later. Am I right?
I don't know if I understood right.

Thanks