向 Swagger UI 添加搜索/过滤器以过滤端点

Question

我们现在已将 swagger api 文档集成到 spring boot 中，并使用 swagger-ui-react": "3.30.1" 来显示 SwaggerUI（默认 /api-docs）。有太多控制器/端点需要滚动，所以我们正在寻找一个搜索栏或过滤器来搜索/过滤端点 有谁知道如何实现这个，有没有内置功能？下面是我正在寻找的示例

示例：

Answer 1

遗憾的是还没有搜索插件。但这里有一个您可以使用的简单示例：

const SearchPlugin = () => {
  return {
    // Inserting the search bar after initialising Swagger-UI
    afterLoad: function(system) {
      // Wait for the DOM to load and then add the search field
      const observer = new MutationObserver(() => {
        const container = document.querySelector("#swagger-ui > section > div.swagger-ui > div:nth-child(2) > div:nth-child(4)");

        if (container && !document.getElementById('endpoint-search')) {
          // Creating the search field
          const searchBar = document.createElement("div");
          searchBar.id = "search-container";
          searchBar.style.marginBottom = "20px";

          const searchInput = document.createElement("input");
          searchInput.type = "text";
          searchInput.id = "endpoint-search";
          searchInput.placeholder = "Search Endpoints...";
          searchInput.style.width = "100%";
          searchInput.style.padding = "8px";
          searchInput.onkeydown = filterEndpoints;
          searchInput.onkeyup = filterEndpoints;

          searchBar.appendChild(searchInput);

          // Inserting the search field into the DOM
          container.prepend(searchBar);

          // Stops the observer when the search field has been successfully added
          observer.disconnect();
        }
      });

      // Start the observer to track changes in the DOM
      observer.observe(document.body, { childList: true, subtree: true });
    }
  };
};

// Function for filtering the endpoints based on the search query
function filterEndpoints() {
  const input = document.getElementById('endpoint-search').value.toLowerCase();
  const operations = document.querySelectorAll('.opblock');

  operations.forEach((operation) => {
    const summary = operation.querySelector('.opblock-summary-description');
    if (summary && summary.textContent.toLowerCase().includes(input)) {
      operation.style.display = '';
    } else {
      operation.style.display = 'none';
    }
  });
}

希望这有帮助！