instantsearch menuselect 小部件有时无法在 IE 上运行
instantsearch menuselect widget is not working sometimes on IE
现在我正在使用 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
我的代码有什么问题?
我解决了这个问题。
为了让小部件在 IE 中工作,我可以向页面添加 polyfills:
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>
现在我正在使用 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
我的代码有什么问题?
我解决了这个问题。 为了让小部件在 IE 中工作,我可以向页面添加 polyfills:
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>