How to make inputText type-ahead values clickable as like a button in jsf/bootsfaces?

Question

I have an inputText with type-ahead where user can type a job class and a drop-down shows, and then they click on select - it populates the data. But, what I want to do is instead of the "Select" button I want to put a onclick or something on my inputText that when the dropdown shows and the user clicks on the drop down value it can populate data that it was doing with my button. Thanks for the help.

Here is my code:

           <h:form>

              <b:inputText id = "inputName"  value = "#{myBean.currentJobSelected}" typeahead="true" typeahead-values="#{myBean.cPaySearchList}"
                           placeholder="e.g. Apple" required="true" ajax="true" >


             <f:ajax render=":dTable" />


                </b:inputText>

          <b:commandButton action="#{myBean.getAllMethods}" update=":dTable"  value= " Select" >

              <f:ajax execute="inputName" render=":dTable" />

          </b:commandButton>




            </h:form>

what if - if I have another action that need to happen when they click on the drop-down values? — , Jun 20 '18 at 13:57
You could create a remote command and call it from JavaScript if you are triggering an event through there — MitchBroadhead, Jun 20 '18 at 17:58

score 0 · Answer 1 · answered Jun 20 '18 at 18:39

0

If I get you right, you're looking for something like this:

<b:remoteCommand name="onValueSelected" actionListener="#{myBean.myMethod}" update=":dtable" />
<script> 
$('#inputName').on('itemAdded', function(event) {
  onValueSelected();
});
</script>

However, I recommend using a CSS class instead of the ID. JSF modifies the IDs, so it's simpler to use a CSS class in the jQuery expression (i.e. $('.job-selected') instead of $('#inputName') - plus you need to add class="job-selected" to the <b:inputText />).

answered Jun 20 '18 at 18:39

Stephan Rauh

3,069
2
18
37

Don't nest the `remoteCommand` into the `inputText`. Apart from that, you're free to move it where it suits you best. Semantically, it belongs to the `inputText`, so I'd put it in the line before or after the `inputText`. – Stephan Rauh Jun 28 '18 at 07:16

How to make inputText type-ahead values clickable as like a button in jsf/bootsfaces?

1 Answers1