Filter / Search as default feature

[mathis-m]

Hi all,

I would like to have an advanced search were I can search for routes and more.
As #6648 came up, I shortly implemented some more advanced filter.
Have a look at the preview. I could imagine to add more functionality:

• route search
• wildcard search (glob pattern)
• full context search (names, tags, routes, descriptions, ...)

I think with this the filter could become a useful tool and maybe a default feature. For example it could be integrated into the top navigation bar by default.

Introducing some picker for what to search could become very useful, when viewing large definitions. For example when viewing GitHub Rest API OAS, it would be good if one could search for routes with wildcards.
Large Preview.

[mathis-m]

More Information in #6851

[kinthaiofficial]

Filtering and search in Swagger UI is possible but buried — here's how to enable and extend it:

Built-in filter (already available):

SwaggerUIBundle({
  url: "/openapi.json",
  dom_id: '#swagger-ui',
  
  // Enable the built-in filter box
  filter: true,           // Shows a search box
  // or:
  filter: "pets",         // Pre-filters to "pets" by default
})

The built-in filter searches operation tags, summary text, and paths.

More powerful: custom filtering plugin:

const FilterPlugin = () => ({
  wrapComponents: {
    InfoContainer: (Original, { React }) => (props) => {
      const [query, setQuery] = React.useState('');
      
      return (
        <div>
          <input 
            type="search"
            placeholder="Search operations..."
            onChange={(e) => {
              // Trigger Swagger UI's built-in filter
              props.layoutActions.setFilter(e.target.value);
            }}
          />
          <Original {...props} />
        </div>
      )
    }
  }
});

SwaggerUIBundle({
  plugins: [FilterPlugin],
  presets: [SwaggerUIBundle.presets.apis],
});

Filtering by HTTP method:

// Custom: filter to show only POST/PUT operations
SwaggerUIBundle({
  requestInterceptor: (req) => req,
  onComplete: () => {
    document.querySelectorAll('.opblock:not(.opblock-post):not(.opblock-put)')
      .forEach(el => el.style.display = 'none');
  }
});

For large APIs (100+ endpoints), the filter is essential UX. The built-in filter: true gets you 80% of the way; a custom plugin gets the rest.