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}" ...
Thanks.