Awais Yousaf
Awais Yousaf

Reputation: 33

how to use list attribute in input in jsf <h:inputtext>

I Need to implement same thing in jsf using jsf builtin components. The problem I am not able to find the list attribute to bind the <datalist>. Please help me how can I do that.

<input id="something" list="somethingelse"/>
        <datalist id="somethingelse">
            <option value="Something"></option>
            <option value="Something Else"></option>
            <option value="Another One"></option>
            <option value="Alpha"></option>
            <option value="Bravo"></option>
            <option value="Charlie"></option>
            <option value="Delta"></option>
            <option value="Echo"></option>
            <option value="Foxtrot"></option>
            <option value="Gamma"></option>
        </datalist>

Upvotes: 0

Views: 1829

Answers (1)

Kukeltje
Kukeltje

Reputation: 12337

You can use jsf passtrough attributes for this.

<input id="something" list="somethingelse"/>

becomes

<h:inputText pt:list="somethingelse" />

So the following full example works:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:head />

<h:body>
    <h:form>
        <h:inputText pt:list="somethingelse" />
        <datalist id="somethingelse">
            <option value="Something"></option>
            <option value="Something Else"></option>
            <option value="Another One"></option>
            <option value="Alpha"></option>
            <option value="Bravo"></option>
            <option value="Charlie"></option>
            <option value="Delta"></option>
            <option value="Echo"></option>
            <option value="Foxtrot"></option>
            <option value="Gamma"></option>
        </datalist>
    </h:form>

</h:body>
</html>

But keep in mind that you need to have the full list of options on the client-side upfront. No easy populating from a database based on the characters that are typed.

If you are allowed to use something like PrimeFaces, its p:autoComplete is way more powerful

Upvotes: 2

Related Questions