Autocomplete Feature

The Imixs-Office-Worklfow UI provides an autocomplete feature for input elements. This feature is based on the JavaScript library ‘imixs-office.autocomplete.js’.

How to Integrate

To integrate and activate the feature for a input field you need at least a CDI controler bean providing a search method

public void searchCreditor() {
    searchResult = new ArrayList<String>();
    // get the param from faces context....
    FacesContext fc = FacesContext.getCurrentInstance();
    String phrase = fc.getExternalContext().getRequestParameterMap().get("phrase");
    if (phrase==null) {
    if (phrase == null || phrase.length() < 2) {
	// search....

The searchResult should contain a List of String elements representing the suggest list.

The integration into a JSF page can look like this:

<h:commandScript name="mySearch" action="#{myController.searchCreditor()}" 
	render="autocomplete-resultlist" onevent="autocompleteShowResult" />
<script type="text/javascript">
		$(document).ready(function() {
			// add autocomplete feature to cdtr.number...
			var creditorField= $("input[data-item='cdtr.number']");
			$(creditorField).each(function() {
		function myCallback(selection) {
<h:panelGroup id="autocomplete-resultlist" layout="block" class="autocomplete-resultlist">
	<ui:repeat var="suggest" value="#{myController.searchResult}">
		<div class="autocomplete-resultlist-element" onclick="autocompleteSelectElement('#{suggest}')">
			<a href="#">
				<h:outputText value="#{suggest}" escape="false"/>

The callback method is optional and can be used to customize the selected text block