Primefaces AutoComplete client side and appearance change

Question

I am using Primefaces 3.5 with jsf 2.0. I have a datatable that has a column with autocomplete component with multiple = "true" in all rows. The datatable has checkbox in each row for row selection. There is one more autocomplete component outside the table(calling it group component). Whenever the value in group component change, the same value should appear in all the autocomplete comonents in the selected rows of the table. For this, I want to change the value of autocomplete components inside table in client side only. The two problems I am facing:

1.How to set/get value of autocomplete components in javascript when multiple="true"? I am able to set/get when mulitple="false" using $(autocomplete).input.val(); But not able to find when mulitple = "true"

UPDATE: I found to get values when mulitple ="true" using $(autocomplete).hinput.val(). But I still couldn't find how to set the values.

2 How to change the ui appearance of autocomplete function when multiple = "true". I have limited space in table. So I want to show all values separated by comma. Currently if width is fixed, the value comes vertically. This increases the height of the row which makes table look ugly.

I am not able to clear the contents of the autocomplete before appending the values. I tried $(autocomplete).hinput.children=[] but nothing is happening. Can you tell me how i can achieve this? — user3516088

Hatem Alimam Hatem Alimam · Accepted Answer · 2014-07-04T07:29:16

As in the comment in order to set the values you can use the following, based on this:

 $this = PF('autoCompleteWV');// or if you use 3.5 and older use autoCompleteWv without PF shortcut
 var itemDisplayMarkup = '<li data-token-value="' + item.attr('data-item-value') + '"class="ui-autocomplete-token ui-state-active ui-corner-all ui-helper-hidden">';
 itemDisplayMarkup += '<span class="ui-autocomplete-token-icon ui-icon ui-icon-close" />';
 itemDisplayMarkup += '<span class="ui-autocomplete-token-label">' + item.attr('data-item-label') + '</span></li>';

  $this.inputContainer.before(itemDisplayMarkup);
  $this.multiItemContainer.children('.ui-helper-hidden').fadeIn();
  $this.input.val('').focus();

  $this.hinput.append('<option value="' + itemValue + '" selected="selected"></option>');

Now to empty the autocomplete, you can use the following, based on this:

PF('autoCompleteWV').jq.find('.ui-icon-close').click();

To change the style of the autocomplete tags or tokens you can apply the modifications on this class

.ui-autocomplete-token

Primefaces AutoComplete client side and appearance change

1 Answers