Question

现在，我正在使用algolia小部件开发搜索页面。如果我不使用menuselect小部件，则我的网页在IE中运行良好。但是，如果我使用menuselect小部件，则不会显示menuselect之后的阿尔戈利亚小部件。因此，我尝试仅测试menuselect小部件。以下代码显示了我的测试文件。

var searchDiscover = instantsearch({
  indexName: 'demo_ecommerce',
  searchClient: algoliasearch('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5'),
  routing: false,
});


var widget = instantsearch.widgets.menuSelect({
  container: '#brand-list',
  attribute: 'brand',
});
searchDiscover.addWidget(widget);
searchDiscover.start();

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="./manifest.webmanifest" />
    <link rel="shortcut icon" href="./favicon.png" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"
    />
    <link rel="stylesheet" href="./src/index.css" />
    <link rel="stylesheet" href="./src/app.css" />

    <title>ais-ecommerce-demo-app</title>
  </head>

  <body>
    <div class="ais-InstantSearch">
      <h1>InstantSearch.js e-commerce demo</h1>

      <div class="left-panel">
        <div id="clear-refinements"></div>

        <h2>Brands</h2>
        <div id="brand-list"></div>
      </div>

      <div class="right-panel">
        <div id="searchbox" class="ais-SearchBox"></div>
        <div id="hits"></div>
        <div id="pagination"></div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.32.0/dist/algoliasearchLite.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@3.0.0"></script>
    <script src="./src/app.js"></script>
  </body>
</html>

它可以在Chrome上运行，但不能在IE上运行。（我在IE上看不到menuselect）。另一方面，我可以在以下URL中看到menuselect实时示例，但找不到代码。 https://instantsearchjs.netlify.com/stories/?selectedKind=MenuSelect&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

我的代码有什么问题？

Answer 1

我喜欢这个问题。为了使小部件可以在IE中工作，我可以在页面中添加polyfills：

<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>

Instantsearch MenuSelect窗口小部件有时无法在IE上运行

1 个答案: