No search result with IE11 solved!

I’ve seen a couple of topics here related to the problem of not showing any search result with IE11.

IE11 does show the result after the search but when the screen is refreshed or its bookmark is accessed, it shows no result. This only happens when the price range filter is applied.

You can test here with your IE11 at the Algolia ikea demo page:

https://community.algolia.com/instantsearch.js/v2/examples/e-commerce/?priceRanges[price]=1%3A10

This shows an error in IE console:

SCRIPT438: Object doesn’t support property or method ‘includes’
instantsearch.min.js (2,148413)

instantsearch.js uses the “includes” method which IE11 doesn’t define. Algolia recommends “If you want support for IE11, we suggest you use polyfill.io.” so, I added this line:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

But, this didn’t solve the problem and then realized that the “includes” error was for Array, not String! The default polyfill.js has String.includes but not Array.includes. The final solution was to add this line, instead:

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

It took awhile to get here but its an elegant solution. My client has more than 10% of IE11 users and we can’t ignore them. I’m sure others feel the same so this is my contribution for the Algolia community. I hope Algolia fixes the demo to support IE11.

2 Likes

Hi @kenji thanks a lot for your detailed post. I’ve created an github issue so that we can fix that. We welcome pull requests too, if you have some time :slight_smile:

Thanks, I saw that it’s fixed at the ikea demo and documentation!

1 Like

This solution didn’t work for me when using instantsearch.js version 2.10.4. I had to include the Array.prototype.find feature.

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

Thank you, this solved my problem, thanks for the post!

Same problem here, but solved with the V3 of polyfill.io https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find