Instant Search and Internet Explorer no results

I am at the end stages of implementing the algolia search engine, but I have one last thing.
The search engine does not work in Internet Explorer.
None of the widgits work.
I get the search box, but no results.
We have the following css

We are using the following scripts:

I have noticed that there is an issue with https://laracasts.com/
if you open link in IE the header is different that in chrome, this is where there search engine is.
Can someone please help me on this topic?

Hey there, could you share how you made the search page and which version of IE that is? That should normally not happen if you have the correct polyfills, but it depends which version of InstantSearch you use.

Thanks!

Here is my search html

<div class="input-container">
    <div class="search-button">
        <i class="fa fa-search"></i>
    </div>
    <input type="text" id="search-input"/>
  
</div>

Hey Lori, could I have the JS too?

app({
    appId: 'xxxxxx',
    apiKey: 'xxxxx',
    indexName: 'hce'
});

function app(opts) {
    // ---------------------
    //
    //  Init
    //
    // ---------------------
    const search = instantsearch({
        appId: opts.appId,
        apiKey: opts.apiKey,
        indexName: opts.indexName,
        urlSync: true,
    });

    // ---------------------
    //
    //  Default widgets
    //
    // ---------------------
    search.addWidget(
        instantsearch.widgets.searchBox({
            container: '#search-input',
            placeholder: 'Search site',
            autofocus: false,
        })
    );

    search.addWidget(
        instantsearch.widgets.hits({
            container: '#hits',
            hitsPerPage: 7,
            templates: {
                item: getTemplate('hit'),
                empty: getTemplate('no-results'),
            },
        })
    );

    search.addWidget(
        instantsearch.widgets.stats({
            container: '#stats',
        })
    );

    search.addWidget(
        instantsearch.widgets.pagination({
            container: '#pagination',
            scrollTo: '#search-input',
        })
    );

    search.start();
}

// ---------------------
//
//  Helper functions
//
// ---------------------
function getTemplate(templateName) {
    return document.querySelector(`#${templateName}-template`).innerHTML;
}

function getHeader(title) {
    return `<h5>${title}</h5>`;
}

function getCategoryBreadcrumb(item) {
    const highlightValues = item._highlightResult.categories || [];
    return highlightValues.map(category => category.value).join(' > ');
}

I have published so you can see in action.
Thank you for your help/

1 Like

Oh I see what’s wrong! The template strings aren’t supported in IE11, change the last bit to:

// ---------------------
//
//  Helper functions
//
// ---------------------
function getTemplate(templateName) {
    return document.getElementById(templateName + 'template').innerHTML;
}

function getHeader(title) {
    return '<h5>' + title + '</h5>';
}

function getCategoryBreadcrumb(item) {
    const highlightValues = item._highlightResult.categories || [];
    return highlightValues.map(category => category.value).join(' > ');
}