InputText with tags and / or typeahead (aka autocompletion)since 0.9.0

You can design your input texts more fancy by decorating them with little tags. Note that this is a late addition to <b:inputText />. Most features of the basic input text component should work with the tags extension, but there's no guarantee. However, the alternative was to make it a component of its own, which seemed like overkill to us.

Known issues

The tag extension and the typeahead extension are recent additions. They are fully functional, but there are still a few known issues.

Both the tags extension and the typeahead extension create new input fields. This means some features don't work. In particular, CSS styles and style classes get lost. For instance, in the examples below, the input fields for the tags are smaller than they should be.
If you update an <b:inputText with tags by an AJAX request, the input field is not properly reinitialized. You have to do so yourself by adding a CSS pseudo class to the <b:inputText and a JavaScript command to the updated region:
In theory, the typeahead widget can fetch the list of proposals from the server. However, we haven't implemented the BootsFaces API. Currently you're limited to a fixed list of entries.

Tags: Basic usage

By setting the attribute tags="true" you can display the input values as tag - similar to <b:badge /> or to price tags in the supermarket. The tags are separated by commas. Users can separate tags either by tying a comma or by hitting the return key.

The tags extension is based on the jQuery plugin Tim Schlechter, which has been published unter a MIT license. In other words, you can freely use it.

Live preview

What's your favorite music style?

JSF markup
Java Bean

Simple typeahead

The typeahead extension is based on the Twitter typeahead jQuery plugin, which has been published under the Twitter license. You can use it freely, as long as you mention the plugin and add the license file to your project. The CSS styles for Bootstrap 3 are added by the CSS files by Bass Jobsen, which have been put under a MIT license.

The remote interface (which is yet to be implemented) requires Bloodhound, which has been published under a MIT licence.

How to define the list of possible values

The example above show the three options to define the list of possible values:

typeahead-values may be a comma separated string.
It may also be a java.util.List of strings (or anything returning something useful when calling toString()). Note that these strings must not contain a comma.
Or is can be an array of strings (or anything returning something useful when calling toString()). Again, these strings must not contain a comma.

Type ahead with tags

You can also combine tags and typeahead.

Using tags and typeahead at the same time requires Bloodhound, which has been published under a MIT licence.

Live preview

JSF markup
Java Bean

Reference section

Attributes of <b:inputText >

Attribute	Default value	Description
accesskey	(none)	Access key to transfer focus to the input element.
ajax	false	Whether the Button submits the form with AJAX.
alt	(none)	Alternate textual description of the input element.
auto-update autoUpdate (alternative writing)	false	Setting this flag updates the widget on every AJAX request.
autocomplete	(none)	Controls browser autocomplete behavior. Legal values: 'off', 'false', 'true', and 'on'.
binding	(none)	An EL expression referring to a server side UIComponent instance in a backing bean.
col-lg colLg (alternative writing)	-1	Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md colMd (alternative writing)	-1	Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm colSm (alternative writing)	-1	Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs colXs (alternative writing)	-1	Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
converter	(none)	An EL expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
converter-message converterMessage (alternative writing)	(none)	Message to display when conversion fails.
delay	(none)	Delays the AJAX request.
dir	(none)	Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content).
disabled	false	Disables the input element, default is false.
display	block	If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
field-id fieldId (alternative writing)	(none)	Unique id of the input field itself (as opposed to the id, which is belongs to the entire component, including the div surrounding the input field). Useful for frameworks like JAAS, which require you to use a specific field id.
field-size fieldSize (alternative writing)	(none)	The size of the input. Possible values are xs (extra small), sm (small), md (medium) and lg (large) .
hidden	(none)	This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id	(none)	Unique identifier of the component in a namingContainer.
immediate	false	Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
inline	false	Inline forms are more compact and put the label to the left hand side of the input field instead of putting it above the input field. Inline applies only to screens that are at least 768 pixels wide.
label	(none)	An optional label of the field. The label is only shown if you also set render-attribute='true'. The label is also used for error messages.
label-col-lg labelColLg (alternative writing)	-1	Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-md labelColMd (alternative writing)	-1	Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-sm labelColSm (alternative writing)	-1	Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-col-xs labelColXs (alternative writing)	-1	Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-large-screen labelLargeScreen (alternative writing)	-1	Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-medium-screen labelMediumScreen (alternative writing)	-1	Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-small-screen labelSmallScreen (alternative writing)	-1	Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
label-style labelStyle (alternative writing)	(none)	The CSS inline style of the label.
label-style-class labelStyleClass (alternative writing)	(none)	The CSS class of the label.
label-tiny-screen labelTinyScreen (alternative writing)	-1	Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
lang	(none)	Code describing the language used in the generated markup for this component.
large-screen largeScreen (alternative writing)	-1	Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
mask	(none)	Input mask. Default masking definitions: "9": numeric, "a": alphabetical, "*": alphanumeric.
maxlength	0	The maximum length of the input.
medium-screen mediumScreen (alternative writing)	-1	Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
name	(none)	The name of the field in the HMTL form and the HTTP request. Useful for frameworks like JAAS, which require you to use a specific field name.
offset	(none)	Integer value to specify how many columns to offset.
offset-lg offsetLg (alternative writing)	(none)	Integer value to specify how many columns to offset.
offset-md offsetMd (alternative writing)	(none)	Integer value to specify how many columns to offset.
offset-sm offsetSm (alternative writing)	(none)	Integer value to specify how many columns to offset.
offset-xs offsetXs (alternative writing)	(none)	Integer value to specify how many columns to offset.
onblur	(none)	Client side callback to execute when input element loses focus.
onchange	(none)	Client side callback to execute when input element loses focus and its value has been modified since gaining focus.
onclick	(none)	The onclick attribute.
oncomplete	(none)	JavaScript to be executed when ajax completes.
ondblclick	(none)	Client side callback to execute when input element is double clicked.
onerror	(none)	JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions).
onfocus	(none)	Client side callback to execute when input element receives focus.
onkeydown	(none)	Client side callback to execute when a key is pressed down over input element.
onkeypress	(none)	Client side callback to execute when a key is pressed and released over input element.
onkeyup	(none)	Client side callback to execute when a key is released over input element.
onmousedown	(none)	Client side callback to execute when a pointer input element is pressed down over input element.
onmousemove	(none)	Client side callback to execute when a pointer input element is moved within input element.
onmouseout	(none)	Client side callback to execute when a pointer input element is moved away from input element.
onmouseover	(none)	Client side callback to execute when a pointer input element is moved onto input element.
onmouseup	(none)	Client side callback to execute when a pointer input element is released over input element.
onselect	(none)	Client side callback to execute when text within input element is selected by user.
onsuccess	(none)	JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception).
placeholder	(none)	The placeholder attribute shows text in a field until the field is focused upon, then hides the text.
process	(none)	Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
readonly	false	Flag indicating that this input element will prevent changes by the user.
render-label renderLabel (alternative writing)	net.bootsfaces.component.ComponentUtils.isRenderLabelDefault()	Allows you to suppress automatic rendering of labels. Used internally by AngularFaces, too.
rendered	false	Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
required	false	Boolean value Require input in the component when the form is submitted.
required-message requiredMessage (alternative writing)	(none)	Message to show if the user did not specify a value and the attribute required is set to true.
size	0	Number of characters used to determine the width of the input element.
small-screen smallScreen (alternative writing)	-1	Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span	(none)	Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
style	(none)	Inline style of the input element.
style-class styleClass (alternative writing)	(none)	Style class of this element.
tabindex	(none)	Position of this element in the tabbing order for the current document. This value must be an integer between 0 and 32767.
tags	false	Show the words of the input text as tags (similar to price tags in the supermarket). You can select one or more tags. The list is sent to the backend bean as a comma-separated list.
tiny-screen tinyScreen (alternative writing)	-1	Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
title	(none)	Advisory tooltip information.
tooltip	(none)	The text of the tooltip.
tooltip-container tooltipContainer (alternative writing)	body	Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay tooltipDelay (alternative writing)	0	The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide tooltipDelayHide (alternative writing)	0	The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show tooltipDelayShow (alternative writing)	0	The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position tooltipPosition (alternative writing)	(none)	Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
type	(none)	Type of the input. The default is text.
typeahead	false	Activates the type-ahead aka autocomplete function. The list of values has to be defined in typeahead-values.
typeahead-highlight typeaheadHighlight (alternative writing)	true	Highlights the part of the suggestions that has already been entered. Defaults to true.
typeahead-hint typeaheadHint (alternative writing)	true	If set to false, the typeahead will not show a hint. Defaults to true.
typeahead-limit typeaheadLimit (alternative writing)	5	Maximum number of suggestions to be shown. Defaults to 5.
typeahead-minLength typeaheadMinLength (alternative writing)	1	Minimum number of characters to be entered before a suggestion is shown.
typeahead-values typeaheadValues (alternative writing)	(none)	Comma-separated list of values that can be used for the typeahead list.
update	(none)	Component(s) to be updated with ajax.
validator	(none)	A method expression referring to a method validationg the input.
validator-message validatorMessage (alternative writing)	(none)	Message to display when validation fails.
value	(none)	Value.
value-change-listener valueChangeListener (alternative writing)	(none)	A method binding expression referring to a method for handling a valuechangeevent.
visible	(none)	This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.

Skinning

<b:inputfield /> is an input tag bearing the CSS-class form-control.
If the attribute required is true, the pseudo CSS class bf-required is added. Thus you can define your custom style for required fields.
If there's a FacesMessage, the input field is bears one of the pseudo CSS classes bf-info, bf-warning, bf-error or bf-fatal. If there are no messages, the input field bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.
If there's a label, it bears the CSS class required, if it's a mandatory field. This class adds an asterisk to the label text. You can override the CSS class to remove the asterisk or to replace it by something else.
If there's a label, it bears the CSS classes bf-info, bf-warning, bf-error or bf-fatal, depending on which severity the error message the input field has. The latter two classes color the label red.
If there's no message, the label bears the pseudo CSS class bf-no-message and has-success. The latter colors the label green by default.