Attention: This component is still under progress and experimental.
b:treeBox The treeBox tag renders a HTML input element of the type "text" using Trivial Components TreeComboBox to customize rendered view. No longer use of selectitems nor converter to render a combobox - just a list of objects (and in case of a tree of nodes).
Tag attributes
label
spinnerText
noEntriesText
hideLabel
readonly
required
disabled
rendered
styleClass
HTML5 tag attributes
placeholder
autofocus
Tag controls
examples
ajax
tooltip
facets
validate
showClearButton
Rendered output
tooltip
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Value:
Readable value:
                            <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:b="http://butterfaces.org/components"> 
<h:head /> 
<body>
    <h:form id="formId">
        <b:treeBox id="input"
                   label="label"
                   hideLabel="false"
                   value="#{myBean.selectedValue}"
                   values="#{myBean.values}"
                   placeholder="Enter text..."
                   styleClass=""
                   readonly="false"
                   disabled="false"
                   inputTextProperty="null"
                   required="false"
                   autoFocus="false"
                   showClearButton="true"
                   rendered="true">
            <b:tooltip>
                tooltip
            </b:tooltip>
        </b:treeBox>
    </h:form> 
</body> 
</html>
                        
                            package de.larmic.treeBox.demo;

import import de.larmic.butterfaces.model.tree.Node;
import import de.larmic.butterfaces.model.tree.DefaultNodeImpl;
import import javax.faces.view.ViewScoped;
import import javax.inject.Named;

@ViewScoped
@Named
public class MyBean implements Serializable {

    private Node rootNode;

    private Node selectedValue;

    public Node getValues() {
        if (rootNode == null) {
            final Node firstChild = new DefaultNodeImpl("firstChild");
            firstChild.setDescription("23 unread");
            firstChild.setImageIcon("some/path/16.png");
            final Node secondChild = new DefaultNodeImpl("second");
            secondChild.setImageIcon("some/path/16.png");
            secondChild.getSubNodes().add(new DefaultNodeImpl("..."))
            ...
            rootNode = new DefaultNodeImpl("rootNode");
            rootNode.setImageIcon("some/path/16.png");
            rootNode.getSubNodes().add(firstChild);
            rootNode.getSubNodes().add(secondChild);
        }
        return rootNode;
    }

    // GETTER + SETTER (selectedValue)

}
                        
                            <?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                             http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
         version="3.0"> 

  <!-- Text showing if no entry is found -->
  <!-- Could be overridden by noEnttriesText component attribute -->
  <!-- default is 'No matching entries...' -->
  <context-param>
     <param-name>org.butterfaces.noEntriesText</param-name>
     <param-value>No matching entries...</param-value>
  </context-param>

  <!-- Text showing if entries are loading -->
  <!-- Could be overridden by spinnerText component attribute -->
  <!-- default is 'Fetching data...' -->
  <context-param>
     <param-name>org.butterfaces.spinnerText</param-name>
     <param-value>Fetching data...</param-value>
  </context-param>

  <!-- If true, it shows 'x'-button to delete the selected entry. -->
  <!-- Could be overridden by showClearButton component attribute -->
  <!-- default is true -->
  <context-param>
     <param-name>org.butterfaces.treebox.showClearButton</param-name>
     <param-value>true</param-value>
  </context-param>

</web-app>