Modifying search results

Dev
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 Likes
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.

4 Likes
3

Thank you for your help!!!

2 Likes
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.

1 Like
5

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

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.