Update using javascript for coral touch ui tag based auto complete

Try below:

var tagList = $('#TagIdcomp').find('ul.js-coral-Autocomplete-tagList');

var tagTitle = 'Asset : Guide';

var tagVal = asset:guide

var nameProp = '../../tagsRegion';

tagList.append('<li role="option" tabindex="0" class="coral-TagList-tag" title="'+tagTitle+'"><button class="coral-MinimalButton coral-TagList-tag-removeButton" type="button" tabindex="-1" title="Remove"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--close"></i></button><span class="coral-TagList-tag-label">'+tagTitle+'</span><input type="hidden" value="'+tagVal+'" name="'+nameProp+'"></li>');

Thanks  the Dialog showed  exactly as expected but with one issue.

Only when i try to remove the dialog that was added using javascript  that is 'Asset : Guide'  is not getting removed .It just stays there on the UI,but other tags which i select Manually from auto selection gets removed.

Do you have any idea how it could be solved??

Could be issue with event registeration.

you can write below code as well in same file to remove optionn but please validate end to end after adding and removing values from dialog and check values in node as well.

$(document).on("click",".cq-dialog-content .coral-TagList-tag-removeButton",function() {

    $(this).parent().remove();

});

Thanks again  now removing is works totally fine and data is saving in crxde properly.

But when tag  is add using  javascript  that is 'Asset : Guide'  and manually i select the 'Asset : Guide' it shows 2 times the same selection on dialog tag field. But the same does not happen with other tags it shows once.

Could we limit the tag display for 'Asset : Guide'  to 1 when selected manually it does not add again on dialog ui.

Any inputs on this will help.

Hi,

You can check if tag is already selected manually your script will not add tag.

And for reverse I need to check, but anyways when dialog is reopened it will show tag once.

Hi,

Yes like you mentioned the tag will show up once when opened.But for the tags which were added using javascript .I can select the same tag once more and shows on UI dialog as twice that would be confusing to authors.Hence need your inputs on that.

Hi,

It seems there are event written on selection and removed to avoid duplicate selection.

You can simply do click when your option is in the list.

No need to write the code for remove also.

Example

$('#TagIdcomp').find('ul.js-coral-Autocomplete-selectList > li[data-value="asset:guide"]').click();

Hi ,

Did you mean the below is enough now

var tagVal = asset:guide"  ;

$(#TagIdcomp).find('ul.js-coral-Autocomplete-selectList > li[data-value="'+tagVal+'"]').click();

Also i can remove the below variables  from previous discussed code

var nameProp = '../../tagsRegion';

  var tagList = $(#TagIdcomp).find('ul.js-coral-Autocomplete-tagList');

    var tagTitle = "Asset:Guide"

tagList.append('<li role="option" tabindex="0" class="coral-TagList-tag" title="'+tagTitle+'"><button class="coral-MinimalButton coral-TagList-tag-removeButton" type="button" tabindex="-1" title="Remove"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--close"></i></button><span class="coral-TagList-tag-label">'+tagTitle+'</span><input type="hidden" value="'+tagVal+'" name="'+nameProp+'"></li>');

Hi Arun,

I had a similar requirement for tagfield. If you have any solution please provide inputs on https://forums.adobe.com/thread/2653668#11257215