即时搜索菜单选择小部件有时在 IE 上不起作用答案

【问题标题】：instantsearch menuselect widget is not working sometimes on IE即时搜索菜单选择小部件有时在 IE 上不起作用
【发布时间】：2019-06-28 23:42:53
【问题描述】：

现在我正在使用 algolia 小部件开发搜索页面。如果我不使用 menuselect 小部件，我的网页在 IE 中运行良好。但是如果我使用 menuselect 小部件，则不会显示 menuselect 之后的 algolia 小部件。所以我尝试只测试 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

我的代码有什么问题？

【问题讨论】：

标签： javascript html algolia instantsearch.js

【解决方案1】：

我解决了这个问题。为了让小部件在 IE 中工作，我可以在页面中添加 polyfill：

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

【讨论】：