SharePoint 2013 list search box and Client Site Rendering (JSLink)

Question

Im trying to implement a FAQ accordion SharePoint list. I managed to get the accordion working while using JSLink. Sadly the search is not working properly. I used the following code in my JSLink js:

(function () {
/*
 * Initialize the variable that store the overrides objects.
 */
var overrideCtx = {};
overrideCtx.Templates = {
    Header: function(ctx) {
            var headerHtml =  RenderTableHeader(ctx);
            headerHtml += "</table>";
            headerHtml += "<div id='accordion'>";
            return headerHtml;
        },
    Footer: function (ctx) {
        return "</div>";
                        },
    Item: function(ctx) {
        // Build a listitem entry for every announcement in the list.
        var ret = "<h3 class='OutlookFAQ'>"+ctx.CurrentItem.Title+"</h3><div style='display:none;' class='OutlookFAQContent'><p>"+ctx.CurrentItem.Answer+"</p></div>";
        return ret;
    }

};


overrideCtx.BaseViewID = 1;
overrideCtx.ListTemplateType = 100;



overrideCtx.OnPostRender = [];
overrideCtx.OnPostRender.push(function()
{
    $('#accordion h3').click(function(e) {
            $(e.target).next('div').siblings('div').slideUp();
            $(e.target).next('div').slideToggle();
    });
});

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

As i sad, the accordion is working, the searchbox is beeing display. If I try to submit search a JS Error "TypeError: this.$T_3 is null" in sp.ui.listsearchbox.js pops up. Any ideas?

Regards

René

Answer 1

This error occurs due to the missing Search Status element which is a part of search control and rendered in Footer template

Search Status

Search status element is used to display hints about search results. RenderSearchStatus function is used for rendering Search status

Solution

Replace Footer rendering template

Footer: function (ctx) {
    return "</div>";   
}

with

Footer: function (ctx) {
   var footerHtml = "</div>";
   footerHtml += RenderFooterTemplate(ctx);  //render standard footer (pager, search status)
   return footerHtml;   
}

---

Blog post Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion contains a working example of List View rendered as Accordion.