Expand my Community achievements bar.

How to Alphabetize the Tag field Suggestions Dropdown List

Avatar

Level 4

Hi all,

 

I need to alphabetize the Tag field Suggestions Dropdown List, I tried with the approach of overlaying the suggestion.jsp file Which is in /libs/cq/gui/components/coral/common/form/tagfield/suggestion/suggestion.jsp

but the dropdown list was alphabetize order upto 10 results and next 10 results re-alphabetize again due to the results came under different responses, where each response holds only 10 results.

As I observed this line from

/libs/cq/gui/components/coral/common/form/tagfield/render.jsp

Where the offset.limit is causing the 10 results per response

final String suggestionsrc="/mnt/overlay/cq/gui/content/coral/common/form/tagfield/suggestion{.offset,limit}.html?root=" + Text.escape(tagRootPath) + "{&query}";

So is there any default way get the entire result as a single response alphabetize, kindly give some suggestions on this please.

 

Thanks

Nandheswara

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply

Avatar

Community Advisor

Hi, 


The reason for requesting results in a subset, of course, is to avoid performance issues. Bringing everything at once just for filtering may be risky. I would recommend sorting this using JavaScript. Once the dialog/page loads, you can trigger a JS hook to rearrange the HTML elements that are part of the dropdown and sort them out however you need.

 

Something like this:

    // Get the dropdown element
    var dropdown = document.getElementById('myDropdown');

    // Get all the options within the dropdown
    var options = Array.from(dropdown.options);

    // Sort the options alphabetically based on their text content
    options.sort(function(a, b) {
      return a.text.localeCompare(b.text);
    });

    // Remove all existing options from the dropdown
    dropdown.innerHTML = '';

    // Add sorted options back to the dropdown
    options.forEach(function(option) {
      dropdown.add(option);
    });

 

Hope this helps!

 



Esteban Bustamante