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() {

4 Answers 4


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
    Commented Nov 9, 2015 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.


I noticed that none of the answers here were accepted, and thought that maybe the reason why is in OP's comment to Vadim Gremyachev's answer, which is that OP wants a way to detect when the term is resolved, not detect a "change" on every keypress.

I was looking for similar functionality, tried Vadim's (and group's) answers, and was dissatisfied with both. After playing around some more, I discovered that when the term "resolves", SharePoint puts the text into a span with the class valid-text (presumably to draw the underline).

Based on that, this is what I have come up with to detect when a term changes and is resolved in the taxonomy field.

Keep in mind - this is for SP 2013 and a single select taxonomy field only. I am not sure at all if this will work for multi-select fields or on any other version of SharePoint.

(Also, I'm using jQuery, but you could adapt this to vanilla JS by using some other DOM ready event.)

function handleTaxonomyFieldChange (mutations) {
    var added = false;
    var removed = false;
    mutations.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(addedNode) {
            if (addedNode.className === 'valid-text') {
                added = true;
        mutation.removedNodes.forEach(function(removedNode) {
            if (removedNode.className === 'valid-text') {
                removed = true;
    if (added) {
        console.log('valid text added');
        // call some other function to do what
        // you want to do when a term is resolved

    if (removed) {
        console.log('valid text removed');
        // call some other function if you have to
        // do any clean up if no term is resolved

$(document).ready(function () {
    var taxObserver = new MutationObserver(handleTaxonomyFieldChange);
    // obviously change the selector to suit your environment / field name
    taxObserver.observe($('div[id^="MyTaxField_"].ms-taxonomy-writeableregion')[0], { childList: true });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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