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) {
return;
}
if (phrase == null || phrase.length() < 2) {
return;
}
// search....
.....
searchResult.add(....);
....
}
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">
/*<![CDATA[*/
$(document).ready(function() {
// add autocomplete feature to cdtr.number...
var creditorField= $("input[data-item='cdtr.number']");
$(creditorField).each(function() {
$(this).addClass("imixs-ml");
autocompleteInitInput(this,mySearch,'autocomplete-resultlist',myCallback);
});
});
function myCallback(selection) {
alert(selection);
}
/*]]>*/
</script>
<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"/>
</a>
</div>
</ui:repeat>
</h:panelGroup>
The callback method is optional and can be used to customize the selected text block