1 Reply Latest reply on May 7, 2013 3:02 AM by mbickel

    How do I get the selected row of a <rich:autocomplete> list?

    mbickel

      I'm using <rich:autocomplete> like this:

       

      <rich:autocomplete value="#{bean.lastSearch}" autocompleteMethod="#{bean.suggestObjects}" var="obj" fetchValue="#{obj.description}" layout="table">
           <h:column>
                <h:graphicImage value="#{obj.imageLink}" />
           </h:column>
           <h:column>
                <h:link rendered="#{obj.type == 'type1'}" outcome="view1" value="#{obj.description}" />
                <h:link rendered="#{obj.type == 'type2'}" outcome="view2" value="#{obj.description}" />
           </h:column>
      </rich:autocomplete>
      

       

      This works fine as long as the user clicks the links provided in the second column (I can probably work out a way to enclose the whole row in the link but that's not the point here).

      However, my users frequently use keyboard shortcuts to select the desired row and submit by pressing enter.

       

      Simple question: how do I navigate in this case?

       

      In RF-3.3 I worked around this with the following little JS:

       

      function navigateBySelection(suggest) {
           var selectedItem = jQuery('.row')[suggest.index];
           if ('undefined' != typeof selectedItem) {
                var link = jQuery(jQuery('a', selectedItem)[0]);
                if ('_blank' === link.attr('target')) {
                     window.open(link.attr('href'));
                } else {
                     window.location = link.attr('href');
                }
           }
      }
      

       

      Where "row" was my entryClass and suggest was the component itself, that fired this function with the onselect event.

      I tried to migrate that to the onitemselect event in RF4, but i'm unable to grab the selected row (not the object, but the actual html <tr>). At first I thought I can select on the class given in selectedItemClass, but that appears to be gone by the time my function gets invoked (though I can select it just fine from the console...)

       

      So.. any hints how I can get the selected row or achieve what I'm trying to do in another way?

        • 1. Re: How do I get the selected row of a <rich:autocomplete> list?
          mbickel

          After poking around the component, I deployed the following work-around:

           

          function navigateBySelection(component) {
            var value = component.getValue(); // the selected text
            var selectedItem = component.items.filter(function(idx){
              return (this.innerText.trim() === value);
            });
          
            var link = jQuery('a', selectedItem);
            if ('_blank' === link.attr('target')) {
              window.open(link.attr('href'));
            } else {
              window.location = link.attr('href');
            }
          }
          

           

          This works for the meantime but will fail if

          #{obj.description}

          isn't unique (and in my case, that's not guaranteed). So I'm still looking for suggestions.