Friday, January 1, 2016

JSF Autocomplete version 2

This is the updated version from previous posted by SNIPPET, http://itakeitalltheway.blogspot.com/2010/10/jsf-2-autocomplete.html

Added features on  the following:
1. support multiple inputs
2. add some code on javascript
3. key  up/down and enter
4. work with bootstrap
Note: for graphic icon, you can add some additional function.

Codes:
1. javascript, add array object to support more inputs and some logic to handle a key
e.g. 
    var currentTag = [];
    com.autoComplete2 = {
        init: function (data) {
            currentTag.push(data);
            for (i = 0; i < currentTag.length; i++) {
                isArrowDown[data] = false; //initialize to false;
            }
        },
        errorHandler: function (data) {
            //alert("Error occurred during Ajax call: " + data.description) ;
        },
2. autoComplete.xhtml, add some input fields,
3. check an UIinput component id to match an input field, AutoComplete2Bean. e.g.

if (event.getComponent().getClientId().equals("mainF:autoComplete2Em:input")) {
...}
4. add bootstrap library and codes at input.xhtml. e.g.
<h:message  class="text-danger" id="emailM" for="autoComplete2Em:input"/>
                        <div class="input-group">
                            <util:autoComplete id="autoComplete2Em" inputTextSelectedValue="#{autoComplete2Bean.id}" inputTxtClass="form-control"   inputTextValue="#{autoComplete2Bean.name}" ...


Below are some result pictures. If need full codes, you can email me.
Thanks.