11
votes

I need to render h:inputText as following html output :

  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />

But h:inputText renders the name attribute same as client id of the component. I want to specify the name attribute myself, instead of putting client id in that, so that the input field can show meaningful autocomplete suggestions from previously submitted values for same field type on other sites. For e.g. when I use name="email" with input field for email, user is shown suggestions of emails ids he submitted previously on other websites.

2

2 Answers

16
votes

You can't achieve it using <h:inputText>. Its name is autogenerated by JSF based on the client ID (which is in turn based on component ID and all of its naming container parents).

You've basically 2 options to achieve the concrete functional requirement anyway:

  1. If there are no other naming container parents, instruct the parent form to not prepend its ID:

    <h:form prependId="false">
    

    This will however cause <f:ajax> to fail.

  2. Use plain HTML elements instead of JSF components:

    <input name="name" value="#{bean.name}" />
    <input name="email" value="#{bean.email}" />
    

    You only have to collect them yourself via @ManagedProperty on a request scoped bean:

    @ManagedProperty("#{param.name}")
    private String name;
    
    @ManagedProperty("#{param.email}")
    private String email;
    

    And you'll miss JSF builtin validation/conversion facility and ajax magic.

There's however a completely different alternative: use HTML5 <input type="email">. This way the browser will autosuggest all previously entered emails on inputs of the very same type. This is not natively supported by <h:inputText>. You can however use a custom render kit to get it to work, as answered in Adding custom attribute (HTML5) support to Primefaces (3.4):

<h:inputText type="email" ... />

Update as of JSF 2.2 you can finally easily declare passthrough attributes without needing a custom render kit.

<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
...
<h:inputText a:type="email" ... />
-1
votes

You are able to do what you want without specifying the name attribute. The id attribute is enough. Try the following as per an example:

< h:inputText id="email" ... />

...
$("#email input").click(function (event) {
...
}

instead of

$("#email input[name='email']").click(function (event) 

Hope this is what you are looking for :)