Modifying search results

Development

AI-generated summary

The discussion revolves around modifying the styling of search results in Discourse, particularly the dropdown from the search bar. RGJ initially sought a way to tweak the generated HTML in the search results, which are created dynamically in search.js rather than using templates. Arkshine suggested using api.reopenWidget to modify the search-result-post widget, pointing to the relevant code and other available widgets like tag, category, group, user, and topic. RGJ later updated that due to the complexity of the HTML generation and external dependencies, they opted to reopen the search-result-topic widget and modify the already generated HTML. While not the most elegant solution, this approach avoided copying large blocks of core code, making the plugin more resilient to future updates. Arkshine acknowledged that this might be the only viable option in such cases.

1

I want to be able to tweak some of the styling in the search results (dropdown from the magnifying class in the top right). Now that seems to generate components on the fly (in app/assets/javascripts/discourse/app/lib/search.js) instead of using a template. I seem to be unable to do

      api.modifyClass("component:search-result-post", {
        didInsertElement() {
          this._super(...arguments);

        },
      });

or something similar.

How can I get a trigger/event and modify some of the generated HTML ?

2

Hi Richard,

Can you elaborate on what modifications you are looking for?

As starting point, I believe you would need to play around:

api.reopenWidget(`search-result-post`, {
    html(attrs) {
        //
    }
})

Here for post, but you have also: tag, category, group, user, and topic.

3

Thank you for your help!!!

4

Update: the HTML generation in that widget was pretty complex and it had a lot of external dependencies. I also didn’t want to copy all that code to our plugin, so I ended up doing this

      api.reopenWidget(`search-result-topic`, {
        html(attrs) {
          const html = this._super(attrs);
          // modify html as we see fit
          return html;
        }
      });

Modifying the already generated HTML is probably not the most elegant way to do it, but it saved me from having to copy a large block of code from core to the plugin, making the plugin more robust against future core updates.

5

Yeah, I also noticed that when I did try on my side. I believe you don’t have much choice here.