I am trying to find a way to auto populate some values whenever I detect a change in taxonomy selection (ClientPeoplePicker control), how can I achieve this using jquery?

This is what I currently have:

 $("[id*='taxDepartment']").change( function() {

When the value in Taxonomy picker control (ScriptForWebTaggingUI) is changed, the event Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onTextChanged is triggered by default.

This custom event could be registered for Taxonomy picker control as demonstrated below:

function initTaggingControl() {
    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));

function onCustomTextChanged(sender, args) {
   if(args.editableRegion.innerText.length > 0){  //if value is specified?
       console.log(args.editableRegion.innerText);  //print term label
ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');

In the specified example term label will be printed every time once the term is selected.

You also might be interested to find more details about ScriptForWebTaggingUI control in this post.

  • 1
    Hi Vadim, your answer is very helpful. Would you be able to further advise how to ensure that the code execution triggers only when the taxonomy term is resolved (underlined)? I do not want my code section to trigger for every keydown as I am planning to query from another list. By the way, I managed to restrict the control by restricting the condition (args.editableRegion.parentNode.parentNode.parentNode.FieldName == 'Department'). – Joe Nov 9 '15 at 8:00

Another solution could be override onblur function, this way the code not trigger every keydown. Still, the inserted value is not validated yet.

function initTaggingControl() {
   RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionBlurEvent, Function.createDelegate(null, onCustomBlur));

function onCustomBlur(sender, args) {
   if (args.oldEditableRegion.parentNode.parentNode.parentNode.FieldName == "FieldName") {
      if (args.oldEditableRegion.innerText.length > 0) {

As textboxes don´t fire the onchange Event when the values are inserted by script but only by user manually this won´t work.

You will have to attach/overwrite some builtin-Taxonomy scripts to execute your code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.