How to Enable Filter ("Filter in Tag") as case insensitive search default lowercase

[nguyenthao1988]

No description provided.

[jurilents]

Did you find a solution?

[sprudel79]

Hi everyone,
I've just started working on a similar topic and I have found here swagger-api/swagger-ui#3876 (comment) a nice approach to customize the filter behavior by implementing a new plugin.
The only thing that is missing on my side is an easy possibility to customize the placeholder text in the filter component which is hard-coded in swagger-ui "Filter by tag" which seems to be difficult to override, so I had to use my own modified swagger-ui-bundle.js file with modified placeholder text.

[msrouchou]

@sprudel79 Do you mind sharing how you setup your custom filter please ?
I have asked a question on SO here, and am out of ideas.

[sprudel79]

Hi @msrouchou , sure I can share some details, but you have to be patient since I am on vacation right now and I'll be back on the project beginning of September.

[sprudel79]

Hi @msrouchou,
here we go:
I am using my own swagger HTML index page based on the original one.
You need to set the "IndexStream" property of the SwaggerUIOptions to apply your file there.

In my custom Swagger HTML file I have added the following:

// Based on https://github.com/swagger-api/swagger-ui/issues/3876
    const AdvancedFilterPlugin = function (system) {
          return {
              fn: {
                  opsFilter: function (taggedOps, phrase) {
                      phrase = phrase.toLowerCase()
                      var normalTaggedOps = JSON.parse(JSON.stringify(taggedOps));
                      for (tagObj in normalTaggedOps) {
                          var operations = normalTaggedOps[tagObj].operations;
                          var i = operations.length;
                          while (i--) {
                              var operation = operations[i].operation;
                              var parameters = "";
                              var responses = "";
                              var requestBody = "";
                              if (typeof operation.parameters !== 'undefined') {
                                  parameters = JSON.stringify(operation.parameters).toLowerCase();
                              }
                              if (typeof operation.responses !== 'undefined') {
                                  responses = JSON.stringify(operation.responses).toLowerCase();
                              }
                              if (typeof operation.requestBody !== 'undefined') {
                                  requestBody = JSON.stringify(operation.requestBody).toLowerCase();
                              }

                              var keepEndpoint = (
                                    (operations[i].path.toLowerCase().indexOf(phrase) !== -1) || 
                                    (operation.summary && operation.summary.toLowerCase().indexOf(phrase) !== -1) ||
                                    (operation.description && operation.description.toLowerCase().indexOf(phrase) !== -1) ||
                                    (parameters.indexOf(phrase) !== -1) ||
                                    (responses.indexOf(phrase) !== -1) ||
                                    (requestBody.indexOf(phrase) !== -1)
                                );

                              if (!keepEndpoint) {
                                  operations.splice(i, 1);
                              }
                          }
                          if (operations.length == 0) {
                              delete normalTaggedOps[tagObj];
                          }
                          else {
                              normalTaggedOps[tagObj].operations = operations;
                          }
                      }
                      return system.Im.fromJS(normalTaggedOps);
                  }
              }
          };
      };

window.onload = function () {
      var configObject = JSON.parse('%(ConfigObject)');
    ...
      configObject.plugins = [SwaggerUIBundle.plugins.DownloadUrl, AdvancedFilterPlugin];    
   ...
 }

[msrouchou]

Thank you for getting back and providing the example :)
I was hoping it could be done without having my own swagger HTML index page, but it seems there is no way around it.
Cheers!

[github-actions]

This issue is stale because it has been open for 60 days with no activity. It will be automatically closed in 14 days if no further updates are made.

[martincostello]

Closing as we can't make absolutely everything you might want to customise supported in the built in distribution.

A custom plugin, or providing your own index.html, is the way to go here.